Кевин Хенриксон из Zimbra провел оживленную презентацию, в которой рассказывалось о некоторых уроках, которые извлекла его организация, и о «грязных уловках», которые он реализовал для повышения производительности веб-приложений, использующих большие кодовые базы JavaScript / CSS. Вот быстрый список предметов, которые он покрыл. Слайды доклада находятся на блоге Zimbra .
Во-первых, отличный инструмент для выявления проблем: анализатор веб-страниц сообщит об относительных размерах HTML, CSS, JavaScript и изображений, составляющих любую данную страницу. Иногда разработчики будут очень усердно работать над сжатием своих изображений, чтобы обслуживать сотни килобайт кода JavaScript, и этот инструмент позволит вам быстро обнаружить такие проблемы.
Первым советом Кевина было не бояться объединять несколько файлов в один файл. Это работает как для JavaScript, так и для CSS, и, хотя оно не уменьшает размер данных, оно может значительно сократить время загрузки, поскольку браузеры будут запрашивать только определенное количество файлов одновременно.
Как я уже говорил , сжатие JavaScript может быть сложной задачей. Есть много инструментов, которые являются полным дерьмом. Но вот несколько, которые работают довольно хорошо:
- JSmin — агрессивный, но не меняет имена
- ShrinkSafe — менее агрессивный (более читаемый вывод), но сокращает имена переменных
- mod_gzip , mod_deflate — модули Apache, которые сжимают веб-контент перед отправкой в браузер, который поддерживает распаковку
После того, как вы оптимизировали свой JavaScript (и другой код), вы должны убедиться, что код правильно кэшируется на стороне клиента. Ключевым моментом здесь является знание ваших HTTP-заголовков, и лучший способ сделать это — получить такой инструмент, как Tamper Data , расширение Firefox, которое позволяет анализировать HTTP-запросы и ответы, происходящие за кулисами.
Затем Кевин продолжил смотреть на пару тематических исследований, с которыми он имел дело. Первая была посвящена высококлассному сообщению в блоге, которое он написал около семи месяцев назад, AJAX и CSS Optimization , в котором критиковалась недавно выпущенная (в то время) версия Digg , внешний интерфейс которой состоял из более чем 80% кода JavaScript, который ему удалось значительно сократить с помощью инструментов сжатия JavaScript, упомянутых выше.
Его вторым примером был lala.com , кеширование HTTP которого безукоризненно, но сайт требует, чтобы браузер загружал так много файлов, что время загрузки значительно замедляется из-за ограничения количества одновременных запросов. Это становится очевидным при просмотре временной шкалы запросов для сайта с помощью такого инструмента, как Tamper Data.