UfoStation

Parse stage

Первым шагом в цепочке рендеринга (rendering pipeline stage) является парсинг (parse). Когда мы говорим о веб-страничках, мы в первую очередь имеем ввиду HTML-документ, поэтому начнем рассматривать парсинг HTML

То, как должен происходить парсинг определяется спецификацией HTML. Living Standard. 13.2.1 Overview of the parsing model. В ней также описывается

Интересно, что спецификация также определяет набор возможных ошибок парсинга и одновременно с этим говорит, что браузер может прерваться в связи ними парсинг.

На деле современные браузеры работают так, что если вы откроете в нем невалидный HTML, предполагающий что-то на экране, то прерывания парсинга не будет и вы вряд ли получите пустую страницу.

Источник изображения: HTML. Living Standard. 13.2.1 Overview of the parsing model

Когда браузер получил часть документа из сети, то он “видит” это как набор байтов — необходимо превратить его в набор символов.

В конечном счете все узлы собираются в объектную модель, для HTML документа эта модель сокращенно называется DOM.

В рамках parse stage в rendering pipeline присутствует задача Parse HTML, в devtools performance видно, что парсинг происходит range’ами.

Важным моментом здесь является тот факт, что у нас есть stage (этапы/шаги) в rendering pipeline и есть задачи, видимые в devtools performance, и не смотря на то, что и в первых и во вторых могут присутствовать одинаковые слова — смыслы за ними стоят разные.

В рамках выполнения задачи parse HTML у нас может возникать множество дочерних задач, например: отправка сетевых запросов (Send Request) как на скрине выше, а также выполнения JavaScript кода (Evaluate Script), вычисление стилей (Recalculate Style) и так далее.

Также к parse stage в rendering pipeline относится и парсинг CSS, здесь у нас происходит точно такая же последовательность действий:

bytes → characters → tokens → nodes→ object model

Отличие заключается только в том, что на выходе мы имеем CSS Object Model (CCSOM).

Для парсинга CSS есть своя спецификация: https://www.w3.org/TR/css-syntax-3/

В devtools performance можно найти соответствующую задачу Parse Stylesheet

Нашли ошибку или опечатку? Предложите исправление

← Вернуться в блог