загрузки JavaScript и CSS

Question

Мне было интересно, если у меня есть, скажем, 6 включений javascripts на странице и 4-5 включений css на той же странице, действительно ли это делает загрузку страницы оптимальной, если я создаю один файл или возможно два и добавьте их все вместе вместо того, чтобы иметь их кучу?

Answer 1

Да. Он получит лучшую производительность с меньшим количеством файлов.

Для этого есть несколько причин, и я уверен, что другие присоединятся, поскольку я не буду перечислять их все.

1. В запросах есть дополнительные издержки, помимо размера файла, такие как сам запрос, заголовки, файлы cookie (если они отправлены) и т. Д. Даже во многих сценариях кэширования браузер отправит запрос, чтобы увидеть, был ли файл изменен или нет. Конечно, правильные настройки заголовков / серверов могут помочь с этим.

2. Браузеры по умолчанию имеют ограниченное количество одновременных подключений, которые он будет открывать одновременно с данным доменом. Я считаю, что IE имеет 2, а Firefox - 4 (я могу ошибиться в цифрах). В любом случае, дело в том, что если у вас есть 10 изображений, 5 файлов js и 2 файла css, то это 17 элементов, которые необходимо загрузить, и только некоторые из них будут выполнены одновременно, а остальные просто поставлены в очередь. *

Я знаю, что это расплывчатые и упрощенные объяснения, но я надеюсь, что это приведет вас на правильный путь.

Answer 2

Даже если просмотр выполняет несколько запросов, он пытается открыть наименьшее количество TCP-подключений (см. Документацию параметров HTTP-заголовка Keep-Alive). Скорость загрузки веб-страниц также может быть улучшена путем настройки режима сжатия (DEFLATE или GZIP) на стороне сервера.

Answer 3

Одна из ваших целей - уменьшить количество http запросов, так что да. Инструмент под названием yslow может оценить ваше приложение, чтобы помочь вам увидеть, что вы можете сделать, чтобы улучшить пользовательский опыт.

http://developer.yahoo.com/yslow/

Answer 4

Да. Таким образом вы делаете меньше HTTP-запросов.

Answer 5

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

Это можно сделать и с изображениями, используя технику, называемую CSS-спрайтами.

Answer 6

Больше нет причин чувствовать разрыв между желанием разбить файлы js & css ради организации, с одной стороны, и иметь мало файлов для эффективности, с другой. Существуют инструменты, которые позволяют вам достичь обоих.

Например, вы можете включить Blender в процесс сборки, чтобы агрегировать (и сжимать) ресурсы CSS и JavaScript. Разработчики Java должны взглянуть на JAWR , который является современным.

Answer 7

Лучшее возможное решение - добавить весь код на одну страницу, чтобы браузер мог получить его одним GET-запросом. Если вы ссылаетесь на несколько файлов, браузер должен запрашивать эти внешние страницы при каждой загрузке страницы.

Это может не вызвать проблем, если в браузере включена круговая навигация, а сайт не генерирует много трафика.

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

Answer 8

Как уже говорили другие, да, чем меньше файлов вы можете включить, тем лучше.

Я настоятельно рекомендую Blender для минимизации и консолидации нескольких файлов CSS / JS. Если вы похожи на меня и часто получаете 10-15 таблиц стилей (сброс, экран, печать, домашняя страница, информация о продуктах, поиск и т. Д.), Этот инструмент очень поможет.

Answer 9

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

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