Рендеринг веб сайтов 101

Вы вводите название сайта в адресную строку браузера, нажимаете enter, и по привычке видите запрашиваемую страницу. Все просто: ввел название сайта — сайт отобразился. Однако для более любознательных хочу рассказать, что происходит между тем как браузер начинает получать куски сайта (да, сайт приходит кусками, по-другому — чанками) и отображает полностью нарисованную страницу.

sstklb7ifbwb0rdaucjpytjm1vk.png

Как устроен браузер?


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

dlfrhh43eqb66arhgeic_h6e_8c.png

User Interface  — это все что видит пользователь: адресная строка, кнопки вперед/назад, меню, закладки — за исключением области где отображается сайт.

Browser Engine отвечает за взаимодействие между User Interface и Rendering Engine. Например клик по кнопке назад должен сказать компоненте RE что нужно отрисовать предыдущее состояние.

Rendering Engine отвечает за отображение веб-страницы. В зависимости от типа файла, эта компонента может парсить и рендерить как HTML/XML и CSS, так и PDF .

Network выполняет xhr запросы за ресурсами, и в целом, общение браузера с остальным интернетом происходит через эту компоненту, включая проксирование, кэширование и так далее.

JS Engine место где парсится и исполняется js код.

UI Backend используется чтобы рисовать стандартные компоненты типа чекбоксов, инпутов, кнопок.

Data Persistence отвечает за хранение локальных данных, например в куках, SessionStorage, indexDB и так далее.

Далее узнаем как рассмотренные компоненты браузера взаимодействуют между собой и разберем подробнее, что происходит внутри Rendering Engine. Другими словами …

Как браузер переводит html в пиксели на экране?


Итак, с помощью компоненты Network браузер начал получать html-файл чанками обычно по 8 кб, что дальше? А далее идет процесс парсинга (спецификация процесса) и рендеринга этого файла в компоненте, как вы уже догадались — Rendering Engine.

Важно! Для повышения юзабилити, браузер не дожидается пока загрузится и распарсится весь html. Вместо этого браузер сразу пытается отобразить пользователю страницу (далее рассмотрим как).


Сам процесс парсинга выглядит так:

646hn1rs70cjwv3g64bolqeemq4.png

Результатом парсинга является DOM дерево. Возьмем к примеру такой html:



  
    
    Web Rendering
    
  
  
    

Hey

Lorem ipsum.

Contact me

DOM дерево такого html файла будет выглядеть так:

ushswctwocrvf7xbpmwvylr0qbs.png

По мере того как браузер парсит html файл, он встречает теги содержащие ссылки на сторонние ресурсы (,