Почему оптимизация пакетов больше не является проблемой в HTTP/2
В частях документации systemjs я прочитал, что оптимизация пакетов больше не нужна в HTTP/2:
По HTTP/2 этот подход может быть предпочтительнее, поскольку он позволяет индивидуально кэшировать файлы в браузере, что означает, что оптимизация пакетов больше не является проблемой.
Мои вопросы:
- Это означает, что нам не нужно думать о связывании скриптов или других ресурсов при использовании HTTP/2?
- Что в HTTP/2 делает эту функцию включенной?
4 ответа
HTTP/2 поддерживает "серверную рассылку", которая исключает объединение ресурсов. Так что, да, если вы используете HTTP/2, пакетирование будет на самом деле анти-паттерном.
Для получения дополнительной информации проверьте это: https://www.igvita.com/2013/06/12/innovating-with-http-2.0-server-push/
При использовании HTTP/1.1 оптимизация связывания была введена в качестве "наилучшей практики", поскольку браузеры могли открывать только ограниченное количество подключений к конкретному домену.
Типичная веб-страница имеет более 30 ресурсов для загрузки, чтобы быть отображенными. В HTTP/1.1 браузер открывает 6 подключений к серверу, запрашивает 6 ресурсов параллельно, ожидает загрузки этих ресурсов, затем запрашивает 6 других ресурсов и т. Д. (Или, конечно, некоторые ресурсы будут загружаться быстрее других, и это соединение может быть использованы ранее, чем другие для другого запроса). Дело в том, что с HTTP/1.1 вы можете иметь не более 6 ожидающих запросов.
Для загрузки 30 ресурсов вам понадобится 5 циклов, что значительно увеличивает задержку при отображении страницы.
Чтобы ускорить рендеринг страницы, с HTTP/1.1 разработчик приложения должен был сократить количество запросов на одну страницу. Это приводит к "наилучшим методам", таким как разбиение домена, встраивание ресурсов, спрайт изображений, объединение ресурсов и т. Д., Но на самом деле это просто умные решения для обхода ограничений протокола HTTP/1.1.
С HTTP/2 все иначе, потому что HTTP/2 мультиплексирован. Даже без HTTP/2 Push функция мультиплексирования HTTP/2 делает все эти хаки бесполезными, потому что теперь вы можете запрашивать сотни ресурсов параллельно, используя одно TCP-соединение.
При использовании HTTP/2 для этих же 30 ресурсов требуется всего одна загрузка в оба конца, что дает прямое пятикратное увеличение производительности в этой операции (что обычно доминирует во времени отображения страницы).
Учитывая, что тенденция веб-контента должна быть богаче, у него будет больше ресурсов; чем больше ресурсов, тем лучше HTTP/2 будет работать по отношению к HTTP/1.1.
Помимо мультиплексирования HTTP/2 у вас есть HTTP/2 Push.
Без HTTP/2 Push браузер должен запросить первичный ресурс (страницу *.html), загрузить его, проанализировать и затем организовать загрузку 30 ресурсов, на которые ссылается первичный ресурс.
HTTP/2 Push позволяет вам получить 30 ресурсов, пока вы запрашиваете основной ресурс, который ссылается на них, сохраняя еще одну передачу туда и обратно, опять же, благодаря мультиплексированию HTTP/2.
Это действительно функция мультиплексирования HTTP/2, которая позволяет забыть о пакетировании ресурсов.
Вы можете посмотреть слайды сессии HTTP/2, которые я давал на различных конференциях.
Bundling многое делает в современной сборке JavaScript. HTTP/2 предназначен только для оптимизации минимизации количества запросов между клиентом и сервером, делая стоимость дополнительных запросов намного дешевле, чем с HTTP/1.
Но связывание сегодня - это не только уменьшение количества запросов между клиентом и сервером. Два других соответствующих аспекта:
- Встряхивание дерева: современные упаковщики, такие как WebPack и Rollup, могут удалять неиспользуемый код (даже из сторонних библиотек).
- Сжатие: большие пакеты JavaScript могут быть лучше сжаты (gzip, zopfli ...)
Кроме того, HTTP / 2-серверный push-запрос может расходовать пропускную способность, выдвигая ресурсы, которые не нужны браузеру, поскольку он все еще хранит их в кэше.
Два хороших сообщения на эту тему:
- http://engineering.khanacademy.org/posts/js-packaging-http2.htm
- https://www.contentful.com/blog/2017/04/04/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling/
Оба этих поста приходят к выводу, что "процессы сборки здесь, чтобы остаться".
Объединение по-прежнему полезно, если ваш сайт
- Подается по HTTP (HTTP 2.0 требует HTTPS)
- Размещено на сервере, который не поддерживает ALPN и HTTP 2.
- Требуется для поддержки старых браузеров (Sensitive и Legacy Systems)
- Требуется для поддержки HTTP 1 и 2 (постепенная деградация)
Существует две функции HTTP 2.0, которые делают пакетирование устаревшим:
- HTTP 2.0 Мультиплексирование и параллелизм (позволяет запрашивать несколько ресурсов по одному TCP-соединению)
- HTTP 2.0 Server Push (Server push позволяет серверу превентивно выдвигать ответы, которые, по его мнению, понадобятся клиенту, в кеш клиента)
PS: Объединение не является единственной техникой оптимизации, которая была бы устранена благодаря появлению функций HTTP 2.0. Будут затронуты такие функции, как спрайт изображений, шардинг доменов и встраивание ресурсов (внедрение изображений через URI данных).