Производительность Javascript и CSS - PullRequest
9 голосов
/ 06 сентября 2008

Я пытаюсь улучшить производительность веб-приложения. У меня есть метрики, которые я могу использовать для оптимизации времени, необходимого для возврата основной HTML-страницы, но меня беспокоят внешние файлы CSS и JavaScript, включенные в эти HTML-страницы. Они обслуживаются статически, с заголовками HTTP Expires, но распределяются между всеми страницами приложения.

Я обеспокоен тем, что браузер должен анализировать эти файлы CSS и JavaScript для каждой отображаемой страницы, и поэтому совместное использование всех CSS и JavaScript для сайта в общих файлах отрицательно скажется на производительности. Должен ли я пытаться разделить эти файлы, чтобы я ссылался на каждой странице только на CSS и JavaScript, необходимые для этой страницы, или я получу небольшую отдачу от своих усилий?

Существуют ли какие-либо инструменты, которые могли бы помочь мне сгенерировать метрики для этого?

Ответы [ 3 ]

14 голосов
/ 06 сентября 2008

Контекст: Несмотря на то, что HTTP-издержки более значительны, чем синтаксический анализ JS и CSS, игнорирование влияния синтаксического анализа на производительность браузера (даже если у вас меньше мегабайта JS) - хороший способ чтобы попасть в беду.

YSlow, Fiddler и Firebug - не самые лучшие инструменты для контроля скорости разбора. Если только они не были обновлены совсем недавно, они не отделяют количество времени, необходимое для извлечения JS по HTTP или загрузки из кэша, от количества времени, потраченного на анализ фактической полезной нагрузки JS.

Скорость анализа немного сложно измерить, но мы несколько раз гонялись за этим показателем в проектах, над которыми я работал, и влияние на загрузку страниц было значительным даже при ~ 500 тыс. JS. Очевидно, что старые браузеры страдают больше всего ... надеюсь, Chrome, TraceMonkey и тому подобное помогают разрешить эту ситуацию.

Предложение: В зависимости от типа трафика на вашем сайте, может быть, стоит разделить полезную нагрузку JS, поэтому некоторые большие куски JS никогда не будут использоваться на сервере. Самые популярные страницы никогда не отправляются клиенту. Конечно, это означает, что когда новый клиент попадает на страницу, где требуется этот JS, вам придется отправить его по сети.

Однако вполне может быть так, что, скажем, 50% вашего JS никогда не нужны 80% ваших пользователей из-за ваших моделей трафика. Если это так, вы должны определенно использовать меньшие, упакованные полезные нагрузки JS только на страницах, где JS необходим. В противном случае 80% ваших пользователей будут подвергаться ненужным штрафам за синтаксический анализ JS при каждой загрузке страницы .

Итог: Трудно найти правильный баланс кеширования JS и меньших, упакованных полезных нагрузок, но в зависимости от вашей структуры трафика, безусловно, стоит рассмотреть методику, отличную от разбивки всех ваших JS на каждый загрузка одной страницы.

3 голосов
/ 06 сентября 2008

Я полагаю, что YSlow делает, но имейте в виду, что, если все запросы не передаются по шлейфу, вам не стоит беспокоиться. Издержки HTTP для разделенных файлов будут влиять на производительность далеко больше, чем анализ, если ваши файлы CSS / JS не превышают несколько мегабайт.

2 голосов
/ 06 сентября 2008

Чтобы добавить отличный ответ Камена, я бы сказал, что в некоторых браузерах время анализа для больших js-ресурсов возрастает нелинейно. То есть, для анализа файла JS размером 1 мегабайт требуется больше времени, чем для двух файлов размером 500 КБ. Таким образом, если большая часть вашего трафика принадлежит людям, которые, вероятно, будут кэшировать ваш JS (постоянные посетители), и все ваши файлы JS стабильны в кеше, может иметь смысл разбить их, даже если вы в конечном итоге загрузите их все на каждый просмотр страницы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...