разделение js / css и его влияние на кеширование

Question

Допустим, у меня есть следующие настройки:

Page1.html

• Включает master.css, page1.css и page1.js

Page2.html

• Включает master.css, page2.css и page2.js

Мне сказали, что слияниедва js и дополнительные css файлы будут лучше для кеширования?Но не будут ли отдельные файлы также кэшироваться?Я не понимаю, как это имеет значение (кроме ремонтопригодности, может быть - лично мне нравится разделение).

Какой самый эффективный и самый разумный способ организовать что-то подобное?

Отказ от ответственности :: Микрооптимизация здесь не проблема - я хотел бы знать, что такое лучшие практики, прежде чем я начну свой проект, поэтому мне не придется возвращаться к этому позже.

Answer 1

Выгода будет:

Если пользователь заходит на страницу Page1, а затем на страницу Page2, его браузер получает:

Page1.html
-> master.css
-> page1.css
-> page1.js

Затем, через некоторое время:

Page2.html
-> [ no need to re-fetch cached items ]

Если page1.css <-> page2.css и page1.js <-> page2.js существенно похожи, это может (в худшем случае) сохранить два просмотра DNS и два HTTP-согласования, которые могут быть довольно медленно.

По крайней мере, вы, возможно, избавляетесь от необходимости "прослушивать" около 1 КБ входящих HTTP-заголовков дважды для page2.css и page2.js. (Хотя все основные браузеры, скорее всего, объединят эти запросы в цепочку.)

Answer 2

Здесь нужно учесть несколько вещей:

• Размер файлов page1 и page2. Если они очень маленькие, вероятно, не стоит дополнительных накладных расходов на отдельный http-запрос, чтобы поместить их в отдельные файлы.

• Общий размер ваших объединенных файлов: Некоторые мобильные устройства не заинтересованы в кэшировании больших файлов.

• Вероятность того, что ваши пользователи попадут на страницу 1 и страницу 2 во время посещения вашего сайта.

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