Оптимизация JavaScript      в Drupal
План
План●   С чего начинается сайт?●   Анализ текущей ситуации.●   Виды оптимизации.●   Обзор существующих Javascript-    комп...
С чего начинается сайт?
Сайт «глазами» браузера●   Браузер: GET-запрос страницы.●   Сервер: на этот запрос высылает HTML-код    страницы.●   Брауз...
Как браузер            рендерит страницу?●   Парсинг и выполнение JS (внешних файлов    и inline) откладывается пока не за...
Что влияет на скорость?●   Время на каждый запрос зависит от:    ●   размера возвращаемого ответа,    ●   загрузки сервера...
Способы ускорения          загрузки страницы●   Уменьшить размеры файлов.●   Уменьшить количество файлов.●   Использовать ...
Анализ текущей ситуации
Ищем JavaScript в проекте●   Найти JS-файлы в проекте можно командой:    ●   find . -name *.js●   Размер всех JS-файлов:  ...
Ограничение протокола HTTP●   Согласно спецификации HTTP 1.1 браузер    должен устанавливать не более 2    одновременных с...
Выводы●   Большинство JS-файлов не    оптимизированы.●   Файлов много и их суммарный размер    значителен.●   Большое коли...
Виды оптимизации
Виды оптимизации●   Минимизация JavaScript●   Обфускация●   Аггрегация●   HTTP-cжатие
Минимизация JavaScript●   Удаление из кода всех несущественных    символов.●   В минимизированном коде удаляются:    ●   в...
Обфускация●   Изменения:    ●   Удаляются пробельные символы и вырезает        комментарии (как в минимизации),    ●   Име...
Пример обфускации JS
Аггрегация●   Объединение нескольких файлов на    странице в один.●   Аггрегация безопасна.●   Позволяет уменьшить количес...
HTTP-cжатие●   Сжимается контент (в основном текстовый),    который передается с веб-серверов через    интернет в браузеры...
Обзор существующихJavaScript-компрессоров
Javascript-компрессоры (1)●   JSMin (Традиционный компрессор)    ●   Написан несколько лет назад Дугласом        Крокфордо...
Javascript-компрессоры (2)●   Packer    ●   Написан Дином Эдвардсом (Dean Edwards).    ●   Дает бОльшее сжатие.    ●   Доб...
Степень сжатия файлов   разного размера
JS-компрессоры(без архивирования)
JS-компрессоры(c Gzip сжатием)
Оптимизация JS в ядре Drupal 6
Стандартные возможности              ядра Drupal●   В ядре Drupal 6 реализованы:    ●   аггрегация JavaScript-файлов    ● ...
Страница "Performance"
Как работает оптимизация        JavaScript в ядре Drupal?●   JS-файлы объединяются в один большой    файл    ●   после каж...
Недостатки и преимущества    оптимизации в ядре DrupalПреимущества:             Недостатки:●   Уменьшается    количество ф...
Использование HTTP-сжатия          в ядре Drupal 6●   Включение сжатия на странице настройки    производительности ("Perfo...
Как работает HTTP-сжатие                в Drupal 6●   Фукнция page_set_cache() сохраняет    сжатый контент страницы в кеше...
Преимущества и недостатки       сжатия в ядре DrupalПреимущества            Недостатки●   Контент страницы    ●   JS и CSS...
Оптимизация JSдополнительными модулями
Модуль JavaScript Aggregator●   http://drupal.org/project/javascript_aggregator●   Делает минимизацию JS-файлов, используя...
Пример Gzip сжатия Имя JS-файла в кеше          Размер,      Комментарий                               байт6e13c ... d3b1f...
Модуль Parallel●   http://drupal.org/project/parallel●   Позволяет браузеру параллельно загружать    внешние файлы страниц...
Перемещение Javascript в footer
Перенос Javascript в footer●   drupal_add_js($data = NULL, $type = module,    $scope = header, $defer = FALSE, $cache =   ...
Выводы
Рекомендации●   Хранить сжатые JS-файлы с максмальным уровнем    сжатия.●   Использовать более эффективные методы упаковки...
Полезная ссылкаhttp://shvetsgroup.com/ru/node/62
Оптимизация JavaScript в Drupal
Оптимизация JavaScript в Drupal
Оптимизация JavaScript в Drupal
Upcoming SlideShare
Loading in...5
×

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

2,380

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,380
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Оптимизация JavaScript в Drupal
  2. 2. План
  3. 3. План● С чего начинается сайт?● Анализ текущей ситуации.● Виды оптимизации.● Обзор существующих Javascript- компрессоров.● Обзор возможностей оптимизации JS ● В ядре Drupal 6 ● Дополнительными модулями● Перемещение Javascript в footer
  4. 4. С чего начинается сайт?
  5. 5. Сайт «глазами» браузера● Браузер: GET-запрос страницы.● Сервер: на этот запрос высылает HTML-код страницы.● Браузер: разбирает код и начинает загрузку всех внешних файлов в порядке их следования в коде страницы. ● Обычно браузер использует не более 2х потоков для загрузки внешних файлов. ● CSS и JS загружаются в одном потоке.
  6. 6. Как браузер рендерит страницу?● Парсинг и выполнение JS (внешних файлов и inline) откладывается пока не загрузится: ● весь JS из HEAD, ● весь CSS из HEAD.● JS выполняется в порядке следования на странице.
  7. 7. Что влияет на скорость?● Время на каждый запрос зависит от: ● размера возвращаемого ответа, ● загрузки сервера и ● активности на каждой машине на всем пути между браузером и сервером.● Чем больше размер файла - тем дольше он будет доставляться в браузер.● Чем больше количество файлов на странице - тем дольше будет длиннее этап «белой страницы».
  8. 8. Способы ускорения загрузки страницы● Уменьшить размеры файлов.● Уменьшить количество файлов.● Использовать HTTP-сжатие.● Увеличить количество хостов, с которых загружается статика сайта.● Поместить JavaScript в footer страницы.
  9. 9. Анализ текущей ситуации
  10. 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. 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. 12. Выводы● Большинство JS-файлов не оптимизированы.● Файлов много и их суммарный размер значителен.● Большое количество внешних файлов на странице.● Ограничение браузеров на количество одновременных соединений с сервером.
  13. 13. Виды оптимизации
  14. 14. Виды оптимизации● Минимизация JavaScript● Обфускация● Аггрегация● HTTP-cжатие
  15. 15. Минимизация JavaScript● Удаление из кода всех несущественных символов.● В минимизированном коде удаляются: ● все комментарии, ● незначащие пробелы, ● переносы строк, ● символы табуляции.● Утилиты: JSMin и YUI Compressor.● Минимизация безопасна.
  16. 16. Обфускация● Изменения: ● Удаляются пробельные символы и вырезает комментарии (как в минимизации), ● Имена функций и переменных заменяются на более короткие● Утилиты: Dojo Compressor (ShrinkSafe).● Может вносить в код ошибки.● Требует правки кода для выделения в нем API-функций и других элементов, которые не должны быть изменены.
  17. 17. Пример обфускации JS
  18. 18. Аггрегация● Объединение нескольких файлов на странице в один.● Аггрегация безопасна.● Позволяет уменьшить количество файлов на странице.● В Drupal 6 и выше аггрегация CSS и JS- файлов встроена в ядро.● В Drupal 5 нужно установить доп. модуль.
  19. 19. HTTP-cжатие● Сжимается контент (в основном текстовый), который передается с веб-серверов через интернет в браузеры.● Метод доставки сжатого контента включен в HTTP/1.1 и все современные браузеры поддерживают протокол HTTP/1.1.● Используются общедоступные алгоритмы сжатия.● Преимущество в том, что уменьшается размер передаваемых файлов.
  20. 20. Обзор существующихJavaScript-компрессоров
  21. 21. Javascript-компрессоры (1)● JSMin (Традиционный компрессор) ● Написан несколько лет назад Дугласом Крокфордом (Douglas Crockford). ● Утилита безопасна.● Dojo shrinksafe ● Очень популярный JavaScript компрессор. ● Написан на Java. ● Парсит код, используя библиотеку rhino и изменяет имена локальных переменных.
  22. 22. Javascript-компрессоры (2)● Packer ● Написан Дином Эдвардсом (Dean Edwards). ● Дает бОльшее сжатие. ● Добавляет распаковку "на лету" во время выполнения JavaScript.● YUI Compressor ● Новыейший компрессор, написанный Люлиен Лекомт (Julien Lecomte) ● Объединяет безопасность JSMin с высочайшим уровнем сжатия Dojo Shrinksafe. ● Написан на Java и основан на библиотеке rhino.
  23. 23. Степень сжатия файлов разного размера
  24. 24. JS-компрессоры(без архивирования)
  25. 25. JS-компрессоры(c Gzip сжатием)
  26. 26. Оптимизация JS в ядре Drupal 6
  27. 27. Стандартные возможности ядра Drupal● В ядре Drupal 6 реализованы: ● аггрегация JavaScript-файлов ● HTTP-сжатие.● Страница настроек «Performance» ("Производительность") ● admin/settings/performance
  28. 28. Страница "Performance"
  29. 29. Как работает оптимизация JavaScript в ядре Drupal?● JS-файлы объединяются в один большой файл ● после каждого файла добавляется ";n".● Код не изменяется ● см. drupal_build_js_cache()
  30. 30. Недостатки и преимущества оптимизации в ядре DrupalПреимущества: Недостатки:● Уменьшается количество файлов на странице, а значит и количество запросов к серверу
  31. 31. Использование HTTP-сжатия в ядре Drupal 6● Включение сжатия на странице настройки производительности ("Perfomance"):
  32. 32. Как работает HTTP-сжатие в Drupal 6● Фукнция page_set_cache() сохраняет сжатый контент страницы в кеше, если: ● сжатие трафика включено и ● Расширение PHP zlib присутствует в системе.● Браузер получит сжатый контент, если: ● Accept-Encoding: gzip,deflate ● Сервер настроен отдавать сжатый контент (mod_gzip, mod_deflate или директивы в .htaccess)● JS и CSS файлы кешируются не сжатыми и сжимаются «на лету»
  33. 33. Преимущества и недостатки сжатия в ядре DrupalПреимущества Недостатки● Контент страницы ● JS и CSS не кешируется сжатым кешируется сжатым.● Уменьшается ● JS и CSS размер кешируются «на передаваемой лету» страницы ● Уровень сжатия маленький
  34. 34. Оптимизация JSдополнительными модулями
  35. 35. Модуль JavaScript Aggregator● http://drupal.org/project/javascript_aggregator● Делает минимизацию JS-файлов, используя JSMin.● Может сжимать уже аггрегированные и минимизированные JS-файлы, используя gzip-сжатие.● Сжатая копия кешируется в файле.
  36. 36. Пример Gzip сжатия Имя JS-файла в кеше Размер, Комментарий байт6e13c ... d3b1f.js 289.558 Аггрегирован ядром Drupal.6e13c ... d3b1f.jsmin.js 173.243 Минифицирован с помощью JSMin.6e13c ... d3b1f.jsmin.js.gz 47.618 Минифицирован и сжат.
  37. 37. Модуль Parallel● http://drupal.org/project/parallel● Позволяет браузеру параллельно загружать внешние файлы страницы.● Для этого создается 3 новых поддомена, которые указывают на одну корневую папку сайта.● Не требует хакать ядро Drupal.● Модуль Parallel работет только с JavaScript, картинками и CSS.
  38. 38. Перемещение Javascript в footer
  39. 39. Перенос 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»
  40. 40. Выводы
  41. 41. Рекомендации● Хранить сжатые JS-файлы с максмальным уровнем сжатия.● Использовать более эффективные методы упаковки JS и CSS-файлов.● Переместить Javascript в footer, чтобы ускорить момент показа страницы пользователю.● Использовать CDN или модуль Parallel, чтобы увеличить количество одновременных соединений, которые может позволить себе браузер.● Во время разработки использовать методы упаковки JS, которые не изменяют код (JSMin), а на production можно упаковать с помощью YUI Compressor.
  42. 42. Полезная ссылкаhttp://shvetsgroup.com/ru/node/62

×