Почему много HTTP запросов — это плохо?

Question

[IIIu6ko]

Всем добрый день. Подскажите, почему принято собирать css и js в бандлы, вместо того, чтобы подключать все компоненты по отдельности напрямую на каждую страницу?
Я знаю что много http-запросов это плохо, что мол тормозит сайт, блокируется загрузка контента и т.п., но при загрузке огромного бандла...
Можете рассказать поподробнее в чём конкретно заключается проблема?
Слышал также про http2 и что мол он лучше работает с множеством запросов. Если кто в курсе вещей, то расскажите почему все ещё пользуются бандлами.

Answer 1

[Griboks]

Это всеобщее заблуждение, пораждённое веб-макаками. Мол, нафига нам что-то оптимизировать и вообще думать о низкоуровневых вещах, когда можно тупо забандлить всё в один файл.

Нужно управлять ресурсами, оптимизировать их и кешировать. Правда в том, что много запросов - это хорошо, но они должны быть построены определённым образом и синхронизированы между собой. Если кратко, то:
1) загружается бандл с базовыми ресурсами, необходимыми для отображения страницы
2,3,4) параллельно в фоне асинхронно загружаются вспомогательные бандлы для красоты и хотелок дизайнеров+маркетологов+шпионов+рекламы * (10 мб на страницу, ага, ага, верю)
5) некоторые бандлы загружаются по требованию

* все хотелки в идеале следует послать "на доработку", но есть риск увольнения

Техчасть
Запрос даёт оверхед, читайте + 0,3 секунды к времени загрузки страницы. 10 запросов = +3с, что уменьшает вероятность удержания пользователя. http2, ws и иже с ними дают оверхед не на отдельный запрос, а на целый бндл за раз, т.е. 10 запросов = +0,3 с.
Браузер рендерит страницу после загрузки, т.е. эти ваши +3с превращаются в +10 с с учётом динамической мишуры и прочих гениальный идей программистов, которые не в курсе про механику работы браузера.
Решение: грузить основной бандл через http2 → рендерить → грузить остальное, не мешая наслаждаться очередным шедевром сайтостроения пользователю

Comments

[jobber_man]

Ещё запросы имеют свойство иногда завершаться с ошибкой. Пусть редко, но 100 запросов уже рубль. В итоге может получится как в личном кабинете на mos. ru, который грузится только один раз из трёх :)

[DollyPapper]

Стоит еще уточнить ко всему прочему, что в http еще дожен быть установлен заголовок Connection: keep-alive, иначе на каждый этот запрос маленьких модулей будет открываться новое tcp соединение, и тогда лучше бандл в 10 метров, чем такое.

[Griboks]

jobber_man, вероятность, что пользователь успешно загрузил /var/htdoc/index.html, но не смог загрузить /var/htdoc/main.js, околонулевая. Конечно, если тянуть на свой сайт ресурсы со всего интернета, да ещё и через куки, то они могут не загрузиться. Лично я как пользователь блочу такие запросы специально.

Answer 2

[FanatPHP]

Тебе когда надо достать из холодильника 5 бутылок пива, что проще - открыть холодильник, взять 5 бутылок пива и закрыть холодильник, или открыть холодильник, взять бутылку, закрыть холодильник, открыть холодильник, взять бутылку, закрыть холодильник, открыть холодильник, взять бутылку, закрыть холодильник, открыть холодильник, взять бутылку, закрыть холодильник, открыть холодильник, взять бутылку, закрыть холодильник?

Comments

[IIIu6ko]

Некорректная аналогия в моём случаи.

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

Я вообще к чему этот вопрос задал? Чем чревато, если я подключу например 10 css-файлов к странице? По факту этот тот же бандл, просто раздельный, соответственно весит он также.

[Михаил Шведков]

весит-то он так же, но оверхэд на доп.запросы будет расти с каждым новым файлом. Грубо говоря, для того же "салата" из 150 ингредиентов тебе надо будет сходить к холодильнику немного больше раз, чем для того, чтоб вытащить уже готовый набор, слепленный в кучу. А если добавить сюда, что у тебя всего 2 руки (какая ирония, браузер как раз ограничивается единовременной загрузкой 2 файлов с одного домена), то получится такая картина:
При едином бандле - подошел к холодильнику, выгреб ком, кое-как дотащил до места, начал готовить
При разбитом на запчасти - сходил к холодильнику, набрал, сколько можешь унести (взял в каждую руку по ингредиенту), отнес. Повторить, пока не выгребешь все. И по сути - ты вытащишь такое же количество ингредиентов, но дневную норму шагов выполнишь чисто курсируя к холодосу и обратно. Ну и да, дверца холодоса тоже подизносится.

С другой стороны, нарезка бандлов на чанки - это вполне адекватное поведение. Когда в "коме продуктов" только то, что тебе прям ща понадобится, а для следующего этапа приготовления - новый ком лежит

[Rsa97]

IIIu6ko, С холодильником не очень удачно. Здесь, скорее, не холодильник, а магазин. Вы, когда салат будете делать, за каждым продуктом отдельно в магазин будете ходить, или всё разом предпочтёте купить?

[FanatPHP]

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

[IIIu6ko]

Михаил Шведков Rsa97 Спасибо. Понял, что на сами запросы тоже время тратиться. Почитал щас про http2, основная фишка, что он может в одной запросе отправлять несколько файлов. А почему тогда повсеместно не используют http2? Какие-то требования для него большие или как это работает?

[IIIu6ko]

FanatPHP, Дело в том, что мне не нужен весь JS или CSS на каждой странице, поэтому аналогия некорректна для меня. Не надо пожалуйста проявлять агрессию. Я не на что не претендую, просто размышляю.

[Михаил Шведков]

IIIu6ko, Честно - понятия не имею. Даже нюансов работы http/2 не знаю. Не горжусь этим, но просто не совсем моя специализация, так что тут не смогу хоть какого-то адекватного ответа дать.

[FanatPHP]

IIIu6ko, а где тут агрессия?
Если не нужно всё, то какая вообще проблема? Указывать на странице нужный файл - и дело с концом.
Только именно об этом и надо было тогда писать в вопросе. А не через полчаса и после десятка ответов

[Михаил Шведков]

IIIu6ko, Насчет "весь css/js" - chunk'и в помощь. Грубо говоря, у тебя есть бандл с общим набором стилей/скриптов, который используется прям вот везде - его и так и так придется загружать.. А есть сильно специфичные вещи и никто не заставляет тебя грузить их сразу.

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

[IIIu6ko]

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

[Сергей]

IIIu6ko,
>А почему тогда повсеместно не используют http2?
Ну как минимум потому что все клиенты работают только поверх TLS. Соответственно без шифрования http/2 работать не будет.

[Сергей]

И тому же Google Insight до сих пор не нравится большое количество файлов, хотя он и поддерживает http/2.

[IIIu6ko]

Михаил Шведков, Да, я увидел сообщение про чанки. Хорошее решение, согласен. Я знал про них, но никогда не использовал. Т.к. не использую webpack.
Мне стало просто интересно что там с запросами этими, т.к. когда-то давно что-то читал/смотрел, где про это говорили и упоминали http2 и что мол не нужно это будет всё. И вот прошло уже столько лет, а вроде ничего не изменилось. Либо я не в курсе.

[FanatPHP]

IIIu6ko, в вопросе этого нету.
Там конкретно спрашивается, "почему принято собирать в бандлы, вместо того, чтобы подключать все компоненты по отдельности".
Чем огрызаться на пустом месте и строить из себя жертву агрессии лучше посмотреться в зеркало и научиться признавать свои ошибки.

[shurshur]

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

[Rerurk]

А я люблю салаты. Готовлю ингрлиенты, потом смешиваю для нужного салата, и ставлю в холодильник. А если надо то смешаю другой салат. Супы конечно так не приготовишь. Тут плита нужна ещё

Answer 3

[profesor08]

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

Comments

[Александр]

Добавка к ответу...
Забей. Решай проблемы по мере поступления.

1. Один файл.
Соединение одно - уменьшает нагрузку как на сервер так и на клиента.
А если файл огромный. Может получиться что сайт первые секунды будет выглядеть жутко криво. Одно из решением - Прелоад.
2. Много файлов.
Соединений много - Увеличивается нагрузка на сервера и клиента.
Можно грузить каждый файл когда от требуется.

Answer 4

[Василий Банников]

Да, http2 действительно лучше работает с несколькими запросами, но http2 не у всех доступен

Comments

[Sanes]

Да и потоков там не сильно много. У FF например по-дефолту 4 или 2 даже.