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

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

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

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

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

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

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

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

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

Ограничение протокола 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Страница "Performance"

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

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

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

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

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

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

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

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

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

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

Перенос 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»

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

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

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

More Related Content

What's hot

Similar to Оптимизация JavaScript в Drupal

More from Vlad Savitsky

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