Есть ли какие-либо изменения в browserpaint, если вы используете http2?

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

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

2
0
42
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Браузер будет рисовать, когда у него есть ресурсы, необходимые для рисования, и это в основном не изменится при HTTP / 2.

Я не уверен, почему вы думаете, что браузер будет ждать загрузки всех ресурсов по протоколу HTTP / 2, но не по протоколу HTTP / 1.1?

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

Теперь ограниченное количество соединений, которые браузеры использовали в HTTP / 1.1 (обычно 6-8), создавало естественный механизм очередей, и браузеру приходилось отдавать приоритет этим критическим ресурсам над некритическими ресурсами, такими как изображения, и отправлять их первыми. С HTTP / 2 существует гораздо более высокий предел (обычно 100-120 параллельных загрузок в зависимости от сервера), поэтому браузер больше не устанавливает приоритеты, и есть опасения, что если все ресурсы загружаются параллельно, они могут замедлить друг друга. . Например, загрузка 50 больших изображений с качеством печати потребует много трафика и может сделать загрузку более важного ресурса CSS, в то же время, для загрузки больше времени. Фактически некоторые ранние сторонники HTTP / 2 видели этот сценарий.

Это решается с помощью приоритезации и зависимостей в HTTP / 2 - где сервер может отправлять некоторые типы ресурсов (например, CSS, JavaScript) с более высоким приоритетом, чем другие (например, изображения), а не отправлять все с тем же приоритетом. Таким образом, даже если все 51 ресурс находятся в работе одновременно, данные CSS должны быть отправлены первыми, а изображения - после. Клиент также может предложить расстановку приоритетов, но в конечном итоге решение принимает сервер. Это действительно зависит от реализации сервера, чтобы иметь хорошую стратегию приоритезации, поэтому рекомендуется протестировать перед переключением.

Еще стоит иметь в виду, как измерить эти изменения в HTTP / 2. Если изображение с низким приоритетом находится в очереди на 4 секунды под HTTP / 1, ожидая освобождения одного из ограниченного количества HTTP / 1 соединений, а затем загружается за 2 секунды, вы, возможно, ранее измерили это как время загрузки 2 секунды (что составляет технически неверно, так как вы не включали время ожидания в очереди, поэтому на самом деле оно составляло 6 секунд). Итак, если это отображается как 5 секунд под HTTP / 2, поскольку оно отправляется немедленно, вы можете подумать, что это на 3 секунды медленнее, хотя на самом деле это на целую секунду быстрее. Просто кое-что, о чем следует помнить при анализе влияния любого перехода на HTTP / 2. При измерении воздействия из-за этого гораздо лучше смотреть на общие ключевые показатели (первая отрисовка, завершение документа и т. Д.), А не на отдельные запросы.

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

То, что вы упомянули, в идеале не должно происходить, если веб-сервер подчиняется приоритетам, которые запрашивает браузер. На http2 браузер обычно запрашивает css с наивысшим приоритетом и async js, изображения с более низким приоритетом. Это должно гарантировать, что даже если ваши изображения, js и css запрашиваются одновременно, сервер сначала отправит css обратно.

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

Вы можете следить за приоритетом различных ресурсов для любой страницы в chrome devtools.

Другие вопросы по теме