Что лучше?Больше запросов HTTP = меньше передаваемых данных или меньше запросов HTTP = больше передаваемых данных?

Question

Такие сайты, как Facebook, используют "ленивую" загрузку js.Когда нужно учитывать, что у меня один сервер с большим трафиком.

Мне интересно - какой из них лучше?

Когда я делаю больше запросов HTTP одновременно - медленная загрузка страницы (из-за ограничения (2 запроса одновременно))

Когда я делаю один запрос HTTP со всеми кодами - трафик (ГБ)поднимается высоко, а апачи отдыхают немного больше.Но у нас будет медленная загрузка страницы.

Что быстрее в результате?

Answer 1

Меньше запросов! Это причина, по которой мы объединяем JS-файлы, CSS-файлы, используем спрайты изображений и т. Д. Вы видите, что проблема Интернета заключается не в скорости или обработке сервером или браузером. Самым большим узким местом является задержка! Вы должны искать разговоры Стива Соудерса.

Answer 2

Проблема немного сложнее, чем эта.

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

«Правильный» путь - все поставить внизу. Таким образом, страница отображается при загрузке ресурсов, и последний шаг - применить поведение.

Но что произойдет, если у вас есть тонна JavaScript? (в примере с Facebook, около одного мегабайта), то, что вы получаете, это рендеринг страницы, и он полностью непригоден, пока не выйдет js.

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

Как правило, когда вы туда доберетесь, вы будете знать, что в этот момент вам нужно взглянуть на более продвинутые методы, такие как загрузчики скриптов. До этого ответом всегда будет «меньше http запросов».

Answer 3

Это действительно зависит от ситуации, устройства, аудитории и подключения к Интернету.

Например, мобильным устройствам требуется как можно меньше HTTP-запросов, так как они работают на более медленных соединениях, и каждое обратное соединение занимает больше времени.Вы должны зайти так далеко, как встроенные (base-64) изображения внутри файлов CSS.

Обычно я сжимаю основную платформу и js libs + css в один файл, каждый из которых кэшируется в CDN.Функции JavaScript или CSS, которые есть только на одной странице, я либо встроу, либо включу в свой собственный файл.Функциональность JS, которая не важна сразу, я перейду к нижней части страницы.Для всех файлов я установил удаленный заголовок HTTP expires, чтобы он всегда находился в кэше браузера (или до тех пор, пока я не обновлю их или он не будет удален при заполнении кэша).

Дополнительно, чтобы обойти ограничения загрузки, вы можетеиметь CNAMES, например images.yourcdn.com и scripts.yourcdn.com, чтобы пользователь мог загружать больше файлов параллельно.Даже если вы не используете CDN, вы должны размещать статический носитель на отдельном имени хоста (может указывать на то же поле), чтобы пользователь не отправлял куки, когда это не нужно.Это звучит как переполнение, но куки могут легко добавить дополнительные 4-8 КБ к каждому запросу.

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

TL; DR: Зависит, но, как правило, подходит смесь обоих.«За исключением мобильных устройств, чем меньше HTTP, тем лучше.