Как браузер рисует страницу

Рендеринг — путь страницы от байтов до пикселей: разбор HTML в DOM, CSS в CSSOM, дерево отрисовки, раскладка и отрисовка.

Ответ пришёл: что дальше

К этому моменту вы знаете, как браузер нашёл сервер, установил защищённое соединение и получил ответ: код 200 и тело, то есть байты HTML. Но байты ещё не страница. Браузеру предстоит превратить их в картинку на экране, и этот путь тоже разбит на этапы. Знать их полезно, потому что именно здесь рождаются «белый экран», при котором долго ничего нет, и «прыгающая вёрстка», когда текст уезжает из-под пальца.

Вся цепочка выглядит так:

1. Байты в символы. По кодировке из заголовка Content-Type байты читают как буквы.
2. Символы в DOM. Браузер находит теги и строит из них дерево элементов: DOM (Document Object Model). Он делает это по мере прихода данных, не дожидаясь конца файла.
3. CSS в CSSOM. Встретив стили, браузер так же строит из правил дерево CSSOM.
4. Дерево отрисовки. DOM и CSSOM соединяют в дерево того, что будет видно. Элементы со стилем display: none в него не попадают.
5. Раскладка. Для каждого элемента считают размеры и место на странице.
6. Отрисовка. Пиксели закрашивают, иногда по слоям, и слои складывают на экран.

Поэкспериментируйте на схеме ниже: она использует настоящие разборщики вашего браузера. Измените HTML или CSS и посмотрите, как менялся результат на каждом этапе.

Что останавливает конвейер

Не все этапы одинаково спокойны. Два важных правила:

• CSS блокирует отрисовку. Пока браузер не получил стили, он ничего не рисует, чтобы не показать голый текст, а секундой позже резко перестроить его. Поэтому стили, нужные на первом экране, стараются делать маленькими и подключать в самом начале.
• Обычный скрипт блокирует разбор. Встретив <script>, браузер останавливает построение DOM, скачивает скрипт, выполняет его и только потом идёт дальше: ведь скрипт может изменить страницу. Чтобы он не мешал, ему добавляют атрибут defer (выполнить после разбора) или async (выполнить, как только скачается).

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

Прыгающая вёрстка

Раскладку браузер считает по тому, что знает. Пока картинка не загрузилась, он не знает её размеров и не оставляет места. Когда она пришла, всё, что было ниже, сдвигается. То же с шрифтом, который подгрузился позже и оказался шире, и с рекламным блоком, вставленным сверху. Человек тянется к кнопке, а она уезжает.

Лекарство одно: сообщать размеры заранее. У картинок для этого есть атрибуты width и height, у рекламы и вставок резервируют место. В части про качество мы увидим, как это измеряется, и разберём показатели скорости, которые ввёл Google: они называются Core Web Vitals.

Смотрим сами: вкладка «Сеть»

В инструментах разработчика (F12) есть вкладка «Сеть» (Network). Обновите страницу при открытой вкладке, и вы увидите:

• список запросов, которые сделала страница: сама страница, стили, скрипты, картинки, шрифты;
• у каждого код ответа, тип, размер и время;
• внизу: сколько запросов и сколько данных всего.

Так вы видите, что именно «весит» страницу. Отсортируйте по размеру, и самые тяжёлые ресурсы окажутся вверху. Для сравнения откройте первый в истории сайт: у него один запрос, одна страница в килобайт. Вспомните урок про пакеты: бюджет в 50 килобайт для модема.

Весь путь за минуту

Вы дошли до конца первой части. Вот весь путь страницы, который вы теперь можете проследить:

1. Вы вводите адрес https://www.example.ru/uslugi/.
2. DNS по имени www.example.ru находит IP-адрес сервера.
3. TCP устанавливает соединение (рукопожатие из трёх шагов), нарезая данные на пакеты.
4. TLS договаривается о ключе и проверяет сертификат: канал стал защищённым.
5. HTTP: браузер отправляет запрос GET /uslugi/, сервер отвечает кодом 200 и телом.
6. Браузер строит DOM и CSSOM, считает раскладку и рисует пиксели.

Каждый шаг можно сломать, и теперь вы знаете, где искать. Сайт не открывается вообще: DNS или соединение. Предупреждение о безопасности: сертификат. Ошибка 404 или 500: ответ HTTP. Белый экран или прыжки: этап отрисовки.

Практика

Вы в эпохе 1996 года и сравниваете её с сегодняшним днём. Откройте в новой вкладке первый в истории сайт и любой современный. Для каждого посмотрите вкладку «Сеть» и впишите в таблицу число запросов и самый тяжёлый ресурс. На втором сайте найдите, что мешает первой отрисовке: файл стилей в начале страницы, обычный скрипт, большая картинка.

Предпросмотр практики не покажет сеть: страница в нём не скачивается по сети, а подставляется целиком. Поэтому вам и нужно открыть настоящие сайты.

Что было не так с 1996 годом

Страницы тогда раскладывали вложенными таблицами, и браузер не мог показать таблицу, пока не просчитает все её ячейки: белый экран был обычным делом. Сегодня раскладкой занимается CSS, и браузер рисует страницу по частям. В следующей части вы начнёте писать сами: HTML, язык, на котором страница строится.