Работа браузера: терминология
Прослойка между считыванием документов на сервере и отрисовкой картинки в окне браузера содержит термины и операции, которые полезно знать - если не для практических микро-оптимизаций, смысл которых на новых движках теряется, то ради теоретического кругозора.
Некоторые термины:
- CSSOM: то же, что DOM, но для CSS.
- Render Tree: дерево объектов, генерируемое браузером на основе DOM и CSSOM.
- Объект рендеринга: отдельный "лист" дерева рендеринга. Содержит DOM-элементы, сгенерированные для них стили, а также строки текста. Не включает невидимые элементы (display: none и др.).
- Layout: позиционирование элементов на странице.
- Flow: поток. По смыслу приблизительно то же, что потоки в компиляторах кода (движок браузера и есть среда выполнения).
- Painting: собственно отрисовка дерево рендеринга после layout-а.
#браузеры #рендеринг
Прослойка между считыванием документов на сервере и отрисовкой картинки в окне браузера содержит термины и операции, которые полезно знать - если не для практических микро-оптимизаций, смысл которых на новых движках теряется, то ради теоретического кругозора.
Некоторые термины:
- CSSOM: то же, что DOM, но для CSS.
- Render Tree: дерево объектов, генерируемое браузером на основе DOM и CSSOM.
- Объект рендеринга: отдельный "лист" дерева рендеринга. Содержит DOM-элементы, сгенерированные для них стили, а также строки текста. Не включает невидимые элементы (display: none и др.).
- Layout: позиционирование элементов на странице.
- Flow: поток. По смыслу приблизительно то же, что потоки в компиляторах кода (движок браузера и есть среда выполнения).
- Painting: собственно отрисовка дерево рендеринга после layout-а.
#браузеры #рендеринг
Работа браузера: рендеринг в деталях
Как процесс, рендеринг выглядит так:
1. Браузер формирует из HTML DOM-дерево...
2. Затем обрабатывает CSS и создает CSSOM.
3. На их основе создается Rendering Tree.
4. Вычисляется положение элементов на странице.
5. Происходит painting.
На этом ничего не заканчивается. Рендеринг - динамическая операция: некоторые шаги повторяются вновь и вновь, меняя структуру документа.
Некоторые операции более затратны для браузера (layout), другие - менее (repainting, или перерисовка свойств, не затрагивающих положения элемента на странице). Знания этих деталей могут помочь с микро-оптимизациями. Впрочем, современные движки хорошо оптимизируют рендеринг автоматически - существенного выигрыша в производительности не будет.
Одна из механик автоматической оптимизации - кэширование repainting-а и relayout-а: бразуер по возможности выполняет потоки команд, входящих в эти операции, едиными блоками.
На этой механке построено преимущество реактивных фреймворков. Реакт строит облегченный Virtual DOM, не содержащий ничего лишнего, тогда как "родной" DOM напичкан неиспользуемыми браузерными правилами и т.п. События на странице затрагивают только связаные с ними компоненты, остальное виртуальное дерево остается нетронутым.
Неизбежен, однако, риторический вопрос: почему сайты на Реакте такие тормозутые?..
#браузеры #рендеринг #React
Как процесс, рендеринг выглядит так:
1. Браузер формирует из HTML DOM-дерево...
2. Затем обрабатывает CSS и создает CSSOM.
3. На их основе создается Rendering Tree.
4. Вычисляется положение элементов на странице.
5. Происходит painting.
На этом ничего не заканчивается. Рендеринг - динамическая операция: некоторые шаги повторяются вновь и вновь, меняя структуру документа.
Некоторые операции более затратны для браузера (layout), другие - менее (repainting, или перерисовка свойств, не затрагивающих положения элемента на странице). Знания этих деталей могут помочь с микро-оптимизациями. Впрочем, современные движки хорошо оптимизируют рендеринг автоматически - существенного выигрыша в производительности не будет.
Одна из механик автоматической оптимизации - кэширование repainting-а и relayout-а: бразуер по возможности выполняет потоки команд, входящих в эти операции, едиными блоками.
На этой механке построено преимущество реактивных фреймворков. Реакт строит облегченный Virtual DOM, не содержащий ничего лишнего, тогда как "родной" DOM напичкан неиспользуемыми браузерными правилами и т.п. События на странице затрагивают только связаные с ними компоненты, остальное виртуальное дерево остается нетронутым.
Неизбежен, однако, риторический вопрос: почему сайты на Реакте такие тормозутые?..
#браузеры #рендеринг #React