Объедините Javascript / CSS в один файл или два для лучшей оптимизации - PullRequest
4 голосов
/ 24 января 2011

В настоящее время я работаю над приложением c #, которое минимизирует и комбинирует javascript / css в фоновом режиме для загрузки на завершившуюся страницу. Как только объединенные свернутые файлы созданы, они сохраняются на диске, и все последующие запросы к странице будут загружать этот файл.

Причина в том, чтобы помочь с производительностью на странице. У меня есть проблема, хотя, что, если объединенный файл большой, например, 200 КБ. Было бы лучше объединить в 2 файла, если бы это было так и иметь 2 отдельных HTTP-запроса? Файл будет заархивирован и кэширован.

Ответы [ 3 ]

8 голосов
/ 24 января 2011

Ну, есть две основные школы мысли.

Первое, это максимально сократить количество HTTP-запросов.Это говорит о сокращении ALL CSS-файлов до одного монстра.Лучше скачать 400 КБ один раз, чем несколько файлов по 50 КБ.(и то же самое для JS).

Другой - объединить, где это необходимо, но не дальше.Если у вас есть 100 КБ CSS, которые нужны только в одном разделе сайта, нет причин замедлять работу остальных пользователей сайта.Это особенно верно для JS, так как существует множество сайтов, которые включают jQuery (например) на каждой странице, потому что 10% сайтов используют его.

Я думаю, что это комбинация двух.Если я использую код на 50% сайта или более, я включаю его в «основной» файл.Если код небольшой (менее 5 КБ или 10 КБ), я включаю его в основной файл.В противном случае я разделяю его на отдельные файлы.

Вся причина этого в том, чтобы улучшить пользовательский опыт.Вы можете сделать гигантский перебор и загрузить все css и JS в 2 соответствующих файла при каждой загрузке страницы (конечно, она будет кэширована).Но если целевая страница не нуждается в 50% этого кода, вы без необходимости замедляете страницу, оказывая наибольшее влияние.

И именно поэтому я считаю, что лучшим решением этой проблемы является анализ ситуации человеком.Они могут искать дубликаты и абстракции.Они могут посмотреть на потребности страницы / сайта и определить лучший сценарий.Если вы не хотите, чтобы ваша программа сделала это (что было бы сложно), она не даст лучший результат (но опять же, есть разница между хорошим и достаточно хорошим) ...

Это все равно мои 0,02 доллара ...

3 голосов
/ 24 января 2011

Документация Google о скорости страницы рекомендует следующее:

Объединить внешний JavaScript

Рекомендации

Оптимальное разбиение файлов. Вот несколько практических правил для объединения ваших файлов JavaScript в производстве:

  • Разделить JavaScript на 2 файла: один JS, содержащий минимальный код необходимо отобразить страницу при запуске; и один файл JS, содержащий код это не нужно до загрузки страницы завершено.
  • Подавать как можно меньше JavaScript файлы из документа <head> как возможно, и сохранить размер тех файлы до минимума.
  • Служить JavaScript редко посещаемого компонента в его собственный файл.
  • Подавать файл только тогда, когда этот компонент запрашивается пользователем. Для маленьких кусочков кода JavaScript, который не должны быть кэшированы, рассмотрим встраивание этот JavaScript на странице HTML сам по себе.

Объединение внешних CSS

Рекомендации

  • Разделите CSS на 2 файла каждый: один CSS-файл, содержащий минимальный код, необходимый для отображения страницы при запуске; и один файл CSS, содержащий код, который не нужен, пока загрузка страницы не будет завершена.
  • Служит CSS редко посещаемого компонента в своем собственном файле. Обслуживайте файл только тогда, когда пользователь запрашивает этот компонент.
  • Для CSS, который не должен кэшироваться, рассмотрите возможность его вставки.
  • Не используйте CSS @import из файла CSS.
2 голосов
/ 24 января 2011

Лучше всего уменьшить количество файлов, потому что у вас может быть открыто только ___ запросов на одно доменное имя при одновременной загрузке. Поэтому, если вы разбиваете его на два запроса, вы используете больше этих выделений, чем вам нужно.

В целом, вы действительно хотите сократить общее количество запросов.

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