Доклад был сделал на DrupalCafe #8 24.02.2011 в Киеве (Украина).

1. Оптимизация JavaScript
в Drupal

2. План

3. План
● С чего начинается сайт?
● Анализ текущей ситуации.
● Виды оптимизации.
● Обзор существующих Javascript-
компрессоров.
● Обзор возможностей оптимизации JS
● В ядре Drupal 6
● Дополнительными модулями
● Перемещение Javascript в footer

4. С чего начинается сайт?

5. Сайт «глазами» браузера
● Браузер: GET-запрос страницы.
● Сервер: на этот запрос высылает HTML-код
страницы.
● Браузер: разбирает код и начинает загрузку
всех внешних файлов в порядке их
следования в коде страницы.
● Обычно браузер использует не более 2х
потоков для загрузки внешних файлов.
● CSS и JS загружаются в одном потоке.

6. Как браузер
рендерит страницу?
● Парсинг и выполнение JS (внешних файлов
и inline) откладывается пока не загрузится:
● весь JS из HEAD,
● весь CSS из HEAD.
● JS выполняется в порядке следования на
странице.

7. Что влияет на скорость?
● Время на каждый запрос зависит от:
● размера возвращаемого ответа,
● загрузки сервера и
● активности на каждой машине на всем пути
между браузером и сервером.
● Чем больше размер файла - тем дольше
он будет доставляться в браузер.
● Чем больше количество файлов на
странице - тем дольше будет длиннее
этап «белой страницы».

8. Способы ускорения
загрузки страницы
● Уменьшить размеры файлов.
● Уменьшить количество файлов.
● Использовать HTTP-сжатие.
● Увеличить количество хостов, с которых
загружается статика сайта.
● Поместить JavaScript в footer страницы.

9. Анализ текущей ситуации

10. Ищем JavaScript в проекте
● Найти JS-файлы в проекте можно командой:
● find . -name '*.js'
● Размер всех JS-файлов:
● find . -name '*.js' -exec ls -l {} ; | awk '{s+=$5}
END {print s}'
● JavaScript-файлы в нашем проекте:
● В ядре (D6): 23 файла.
● В доп. темах и модулях: > 1300(!) файлов.
● Общий размер: 15Мб.

11. Ограничение протокола HTTP
● Согласно спецификации HTTP 1.1 браузер
должен устанавливать не более 2
одновременных соединений к одному хосту.
● Firefox 2: 2
● Firefox 3,4: >4
● Opera 9.26: 4
● Opera 9.5 beta: 4
● Safari 3.0.4 Mac/Windows: 4
● IE 6,7: 2
● IE 8: 6

12. Выводы
● Большинство JS-файлов не
оптимизированы.
● Файлов много и их суммарный размер
значителен.
● Большое количество внешних файлов на
странице.
● Ограничение браузеров на количество
одновременных соединений с сервером.

13. Виды оптимизации

14. Виды оптимизации
● Минимизация JavaScript
● Обфускация
● Аггрегация
● HTTP-cжатие

15. Минимизация JavaScript
● Удаление из кода всех несущественных
символов.
● В минимизированном коде удаляются:
● все комментарии,
● незначащие пробелы,
● переносы строк,
● символы табуляции.
● Утилиты: JSMin и YUI Compressor.
● Минимизация безопасна.

16. Обфускация
● Изменения:
● Удаляются пробельные символы и вырезает
комментарии (как в минимизации),
● Имена функций и переменных заменяются на
более короткие
● Утилиты: Dojo Compressor (ShrinkSafe).
● Может вносить в код ошибки.
● Требует правки кода для выделения в нем
API-функций и других элементов, которые
не должны быть изменены.

17. Пример обфускации JS

18. Аггрегация
● Объединение нескольких файлов на
странице в один.
● Аггрегация безопасна.
● Позволяет уменьшить количество файлов
на странице.
● В Drupal 6 и выше аггрегация CSS и JS-
файлов встроена в ядро.
● В Drupal 5 нужно установить доп. модуль.

19. HTTP-cжатие
● Сжимается контент (в основном текстовый),
который передается с веб-серверов через
интернет в браузеры.
● Метод доставки сжатого контента
включен в HTTP/1.1 и все современные
браузеры поддерживают протокол HTTP/1.1.
● Используются общедоступные алгоритмы
сжатия.
● Преимущество в том, что уменьшается
размер передаваемых файлов.

21. Обзор существующих
JavaScript-компрессоров

22. Javascript-компрессоры (1)
● JSMin (Традиционный компрессор)
● Написан несколько лет назад Дугласом
Крокфордом (Douglas Crockford).
● Утилита безопасна.
● Dojo shrinksafe
● Очень популярный JavaScript компрессор.
● Написан на Java.
● Парсит код, используя библиотеку rhino и
изменяет имена локальных переменных.

23. Javascript-компрессоры (2)
● Packer
● Написан Дином Эдвардсом (Dean Edwards).
● Дает бОльшее сжатие.
● Добавляет распаковку "на лету" во время
выполнения JavaScript.
● YUI Compressor
● Новыейший компрессор, написанный Люлиен
Лекомт (Julien Lecomte)
● Объединяет безопасность JSMin с высочайшим
уровнем сжатия Dojo Shrinksafe.
● Написан на Java и основан на библиотеке rhino.

24. Степень сжатия файлов
разного размера

25. JS-компрессоры
(без архивирования)

26. JS-компрессоры
(c Gzip сжатием)

27. Оптимизация JS в ядре Drupal 6

28. Стандартные возможности
ядра Drupal
● В ядре Drupal 6 реализованы:
● аггрегация JavaScript-файлов
● HTTP-сжатие.
● Страница настроек «Performance»
("Производительность")
● admin/settings/performance

29. Страница "Performance"

30. Как работает оптимизация
JavaScript в ядре Drupal?
● JS-файлы объединяются в один большой
файл
● после каждого файла добавляется ";n".
● Код не изменяется
● см. drupal_build_js_cache()

31. Недостатки и преимущества
оптимизации в ядре Drupal
Преимущества: Недостатки:
● Уменьшается
количество файлов
на странице, а
значит и количество
запросов к серверу

32. Использование HTTP-сжатия
в ядре Drupal 6
● Включение сжатия на странице настройки
производительности ("Perfomance"):

33. Как работает HTTP-сжатие
в Drupal 6
● Фукнция page_set_cache() сохраняет
сжатый контент страницы в кеше, если:
● сжатие трафика включено и
● Расширение PHP zlib присутствует в системе.
● Браузер получит сжатый контент, если:
● Accept-Encoding: gzip,deflate
● Сервер настроен отдавать сжатый контент
(mod_gzip, mod_deflate или директивы в
.htaccess)
● JS и CSS файлы кешируются не сжатыми и
сжимаются «на лету»

34. Преимущества и недостатки
сжатия в ядре Drupal
Преимущества Недостатки
● Контент страницы ● JS и CSS не
кешируется сжатым кешируется сжатым.
● Уменьшается ● JS и CSS
размер кешируются «на
передаваемой лету»
страницы ● Уровень сжатия
маленький

35. Оптимизация JS
дополнительными модулями

36. Модуль JavaScript Aggregator
● http://drupal.org/project/javascript_aggregator
● Делает минимизацию JS-файлов, используя
JSMin.
● Может сжимать уже аггрегированные и
минимизированные JS-файлы, используя
gzip-сжатие.
● Сжатая копия кешируется в файле.

37. Пример Gzip сжатия
Имя JS-файла в кеше Размер, Комментарий
байт
6e13c ... d3b1f.js 289.558 Аггрегирован ядром
Drupal.
6e13c ... d3b1f.jsmin.js 173.243 Минифицирован с
помощью JSMin.
6e13c ... d3b1f.jsmin.js.gz 47.618 Минифицирован и
сжат.

38. Модуль Parallel
● http://drupal.org/project/parallel
● Позволяет браузеру параллельно загружать
внешние файлы страницы.
● Для этого создается 3 новых поддомена,
которые указывают на одну корневую папку
сайта.
● Не требует хакать ядро Drupal.
● Модуль Parallel работет только с JavaScript,
картинками и CSS.

40. Перемещение Javascript в footer

41. Перенос Javascript в footer
● drupal_add_js($data = NULL, $type = 'module',
$scope = 'header', $defer = FALSE, $cache =
TRUE, $preprocess = TRUE)
● $scope (optional) The location in which you
want to place the script. Possible values are
'header' and 'footer' by default. If your theme
implements different locations, however, you
can also use these.
● http://drupal.org/node/784626
● «Make 'footer' the default scope for drupal_add_js()
so that pages render fast»

42. Выводы

43. Рекомендации
● Хранить сжатые JS-файлы с максмальным уровнем
сжатия.
● Использовать более эффективные методы упаковки JS и
CSS-файлов.
● Переместить Javascript в footer, чтобы ускорить момент
показа страницы пользователю.
● Использовать CDN или модуль Parallel, чтобы увеличить
количество одновременных соединений, которые может
позволить себе браузер.
● Во время разработки использовать методы упаковки JS,
которые не изменяют код (JSMin), а на production можно
упаковать с помощью YUI Compressor.

44. Полезная ссылка
http://shvetsgroup.com/ru/node/62