Перейти к содержимому
~/Andrei Nogotkov/ blog
← cd ../posts

$ cat posts/browser-rendering-pipeline.md

Rendering pipeline браузера: от байтов до пикселей

Практическая карта рендеринга: parsing, style, layout, paint, composite — и где искать узкие места.

performance· 6.8k views · 14 min

Браузер превращает ответ сервера в пиксели не за один шаг. Сначала поток байтов становится токенами и DOM, затем CSSOM участвует в вычислении стилей.

01 / детали реализации

Layout отвечает на вопрос «где?», paint — «что нарисовать?», а composite собирает слои на GPU. Оптимизация начинается с измерений.

Старайтесь уменьшать область перерасчёта, избегать layout thrashing и анимировать transform и opacity там, где это оправдано.