大喵.png

Это первый 116 не политый оригинал, я хочу получить больше хорошего оригинального текста, ищите количество, вызывающее у нас озабоченность общественности ~ Эта статья впервые появилась в правительстве, чтобы принять облачный интерфейсный блог:Перекомпоновка и перерисовка рендеринга браузера

предисловие

Перекомпоновка и перерисовка — одни из самых часто употребляемых слов во фронтенд-разработке, вы можете увидеть их в различных аспектах и статьях, связанных с оптимизацией производительности, но многие из них были восприняты небрежно. Эта статья поможет вам понять принципы перекомпоновки и перерисовки из процесса рендеринга в браузере.

Процесс рендеринга в браузере

Основная функция браузера — отправить запрос на сервер для загрузки и парсинга ресурса и отображения его в браузере. Процесс отображения содержимого веб-страницы в браузере фактически выполняется механизмом рендеринга. Существует много видов движков рендеринга, здесь мы возьмем в качестве примера webkit.

Основной процесс движка рендеринга WebKit

(картинка взята из интернета)

Из приведенного выше рисунка видно, что процесс рендеринга в браузере выглядит следующим образом:

Разобрать исходный код HTML и сгенерировать дерево DOM.
Разобрать CSS и сгенерировать дерево CSSOM.
Объедините дерево DOM с деревом CSSOM, удалите невидимые элементы и создайте дерево рендеринга.
Макет (Layout): По сгенерированному дереву рендеринга выполните макет (Layout), чтобы получить геометрическую информацию (ширину, высоту и положение и т. д.) узла.
Рисование: визуализирует каждый пиксель дерева визуализации на экране в соответствии с деревом визуализации и информацией о геометрии, полученной при перекомпоновке.

визуализировать дерево

(картинка взята из интернета)

Постройте процесс дерева рендеринга:
1. Пройдите каждый видимый узел, начиная с корня дерева DOM.
2. Для каждого видимого узла найдите соответствующие правила в дереве CSSOM и примените их.
3. На основе каждого видимого узла и соответствующего ему стиля в комбинации создается дерево рендеринга.
что такое невидимый узел
1. Некоторые узлы, которые не будут отображать выходные данные, такие как скрипт, мета, ссылка и т. д.
2. Некоторые узлы скрыты через css. Например, дисплей: нет. Обратите внимание, что узлы, скрытые с помощью видимости и непрозрачности, по-прежнему будут отображаться в дереве визуализации (поскольку они также занимают место в документе), и только узлы с параметром display : none не будут отображаться в дереве визуализации.

Принцип оплавления и перекраски

Webkit превращает элементы дерева рендеринга в объекты рендеринга, каждый объект рендеринга представляет собой прямоугольную область, обычно соответствующую блоку CSS соответствующего узла, и содержит геометрическую информацию, такую как ширина, высота и положение. На тип поля влияет свойство стиля «отображение», связанное с узлом, создавая разные объекты рендеринга для разных типов отображения.

RenderInline
RenderBlock
RenderListItem

Класс WebKits RenderObject является базовым классом для всех объектов рендеринга и определяется следующим образом:

class RenderObject{
  virtual void layout();
  virtual void paint(PaintInfo);
  virtual void rect repaintRect();
  Node* node;  // the DOM node
  RenderStyle* style;  // the computed style
  RenderLayer* containgLayer; // the containing z-index layer
}

Каждый объект рендеринга имеетlayoutа такжеpaintметоды, которые соответствуют методам перекомпоновки и перерисовки соответственно. Макет — это рекурсивный процесс. Корневой рендерер начинает с HTML-элемента, а затем рекурсивно обходит часть или всю древовидную структуру.Каждый рендерер вызывает дочерний элемент, который необходимо разместить.layoutилиpaintметод.

что такое рефлоу

Когда объект рендеринга создается и добавляется в дерево рендеринга, он просто объединяет узел DOM с соответствующим стилем и не содержит информации о положении и размере. Так что еще нужноlayoutЭтот процесс вычисляет их положение и размер, этот процесс называется перекомпоновкой.

Глобальный макет и добавочный макет

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

Глобальные изменения стиля, влияющие на все объекты рендеринга, например, изменение размера шрифта.
Изменение размера экрана.

Инкрементный макет: относится к парам, отмеченным как“dirty”Объект рендеринга для макета. Как правило, выполняется асинхронно, браузер постепенно размещает "reflow команды» ставятся в очередь, и планировщик инициирует пакетное выполнение этих команд. Но сценарии, запрашивающие информацию о стиле (например, offsetHeight ), могут синхронно запускать добавочный макет.

Чтобы избежать общего расположения всех мелких изменений, браузеры используют систему грязных битов. Макет требуется, если объект рендеринга изменился или пометил себя и свои дочерние элементы как «грязные».

Есть два флага: «грязный» и «дети грязные». "дети грязные" означает, что хоть сам рендерер и не изменился, но у него есть хотя бы один дочерний элемент, который нужно выложить.

Условия срабатывания:

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

Изменяются геометрические свойства элемента DOM.Общие геометрические свойства включают ширину, высоту, отступы, поля, левое, верхнее, границы и т. д.
Увеличьте, уменьшите или переместите узлы DOM.
При чтении и записи атрибутов семейства смещения, семейства прокрутки и клиентского семейства браузеру необходимо выполнить операцию перекомпоновки, чтобы получить эти значения.
Вызовите метод window.getComputedStyle.

что такое перекрасить

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

Во время фазы перерисовки система просматривает дерево рендеринга и вызывает объект рендеринга.paintметод для отображения содержимого визуализированного объекта на экране. Как и компоновка, отрисовка делится на глобальную (отрисовка всего дерева рендеринга) и пошаговую.

порядок розыгрыша

Порядок отрисовки на самом деле является порядком, в котором элементы входят в контекст стиля стека. Эти стеки рисуются сзади наперед, поэтому этот порядок влияет на рисование. Порядок укладки объектов блочного рендеринга следующий:

фоновый цвет
Фоновое изображение
Рамка
потомство
контур

Условия срабатывания:

Перерисовка — это действие браузера, вызванное изменением внешнего вида элемента, например изменениемvisibility,outline,background-colorи другие атрибуты, эти атрибуты влияют только на внешний вид и стиль элемента, а когда они не влияют на геометрические атрибуты, они вызовут перерисовку (repaint)

Отладка с помощью инструментов производительности

Ниже приведен небольшой пример, его более интуитивно понятно отлаживать с помощью инструмента производительности.

const box = document.querySelector('#box') 
const btn = document.querySelector('#btn') 
btn.addEventListener('click', () => { 
  box.style.width = '200px'
})

Скриншот можно рассматривать как завершенный процесс рендеринга JS/CSS > Style > Layout > Drawing > Composing

Если мы просто изменим цвет фона

box.style.background = '#fof'

На приведенном выше рисунке видно, что при изменении цвета фона процесс рендеринга пропускает ссылку Layout (макет) и продолжает отрисовку и последующий процесс.

пиксельный конвейер

(картинка взята из интернета)

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

JavaScript. В общем, мы будем использовать JavaScript для достижения некоторого визуального эффекта изменения. Например, использование jQuery.animateФункции выполняют анимацию, сортируют набор данных или добавляют на страницу некоторые элементы DOM и т. д. Конечно, помимо JavaScript, есть и другие распространенные способы достижения визуальных изменений, такие как CSS-анимация, переходы и API веб-анимации.
расчет стиля. Этот процесс основан на сопоставлении селекторов, таких как.headlineили.nav > .nav__item) Процесс определения того, какие элементы применяют те или иные правила CSS. Зная правила из этого, правила применяются и рассчитывается окончательный стиль каждого элемента.
макет. Зная, какие правила применять к элементу, браузер может начать вычислять, сколько места он будет занимать и его положение на экране. Режим макета веб-страницы означает, что один элемент может влиять на другие элементы, например.<body>Ширина элемента обычно влияет на ширину его дочерних элементов и узлов по всему дереву, поэтому для браузеров процесс компоновки происходит довольно часто.
рисовать. Рисование — это процесс заполнения пикселей. Он включает в себя отрисовку текста, цветов, изображений, границ и теней, практически всех видимых частей элемента. Окрашивание обычно выполняется на нескольких поверхностях (часто называемых слоями). Рисование на самом деле состоит из двух шагов: создание списка вызовов отрисовки и заполнение пикселями.
синтез. Поскольку части страницы могут отображаться в несколько слоев, они должны отображаться на экране в правильном порядке, чтобы страница отображалась правильно. Это особенно важно для элементов, которые перекрывают другой элемент, так как ошибка может привести к тому, что один элемент будет неправильно отображаться поверх другого.

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

1. JS/CSS > Стиль > Макет > Рисовать > Композиция

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

2. JS/CSS > Стиль > Краска > Композитинг

Если вы измените свойства, не влияющие на макет страницы, такие как фоновое изображение, цвет текста или тень, браузер пропустит макет, но последующее рисование и последующие процессы все равно будут выполняться.

3. JS/CSS > Стиль > Композиция

Некоторые свойства могут привести к тому, что конвейер рендеринга пропустит компоновку и отрисовку, и ему нужно будет выполнять только слияние слоев композиции, например: свойства преобразования и непрозрачности.

Только когда элемент увеличивается до синтетического слоя, TRANSFORM и OPACITY не запускают Paint, и если это не синтетический слой, он все равно запускает Paint.

Согласно порядку конвейера рендеринга, перерисовка обязательно вызовет перерисовку, а перерисовка не обязательно вызывает перерисовку.

Если вы хотите узнать, какая из трех версий выше будет запущена при изменении любого заданного свойства CSS, проверьтеCSS-триггеры. Краткое введение в высокопроизводительную анимацию см.Изменить свойства только синтезаторовчасть.

Как уменьшить перекомпоновку и перерисовку

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

Уменьшить макет принудительной синхронизации

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

Например, при загрузке свойства или метода браузер немедленно очистит очередь.

Чтение и запись свойств семейства смещения, семейства прокрутки и семейства клиентов, а также методов getComputedStyle() и getBoundingClientRect()

Современные браузеры оптимизируют частые операции перекомпоновки или перерисовки. Браузер будет поддерживать очередь и помещать в нее все операции, вызывающие перекомпоновку и перерисовку. Если количество задач в очереди или интервал времени достигнет порогового значения, браузер очистит поставить в очередь и выполнить пакетный процесс, который может превратить несколько перекомпоновок и перерисовок в одну.

Избегайте частых манипуляций с DOM

Создайте documentFragment, операции DOM выполняются над documentFragment и, наконец, смонтируйте его на его родительском узле.

let container = document.getElementById('container')
let content = document.createDocumentFragment()
for(let i=0;i<10;i++){
  let li = document.createElement("li")
  li.innerHTML = 'li'+i
  content.appendChild(li)
}
container.appendChild(content)

Включить ускорение графического процессора

В стиле есть концепция, аналогичная слою в ps, и Layout и Paint в каждом слое не влияют друг на друга. Элементы с включенным ускорением графического процессора будут преобразованы в один слой.

<style>
#box{
    width: 100px;
    height: 100px;
    background: #f00;
    transition: 0.5s ease;
}
</style>
<body>
    <div id="box"></div>
    <button id="btn">点击</button>
</body>
</html>
<script>
    const box = document.querySelector('#box')
    const btn = document.querySelector('#btn')
    btn.addEventListener('click', () => {
       box.style.transform = 'translateX(200px)'
    })
</script>

В некоторых статьях написано, что свойства transform и opacity не будут вызывать перекомпоновку и перерисовку, но приведенный выше пример (перехватывается только начало анимации) Фактический эффект заключается в том, что происходит перерисовка в начале и конце анимации (Paint .В процессе анимации происходит только **композитный** синтез.Тогда зачем здесь перерисовка?Это потому что свойства анимации или перехода применяются к трансформации и непрозрачности.Эти два свойства в процессе,если анимация или переход не начался или закончился., то продвижение составного слоя также не будет выполнено.Поэтому перерисовка происходит, когда составной слой создается до начала анимации, а независимый составной слой удаляется после окончания анимации, что вызовет перерисовку.

Композитные слои можно увидеть в инструменте «Слои» консоли:

В браузере ядра WebKit свойства преобразования CSS3, непрозрачности и фильтра могут обеспечить эффект синтеза, и браузер будет продвигать слой рендеринга к слою синтеза.

Как включить аппаратное ускорение?

Свойство will-change CSSdeveloper.Mozilla.org/this-cn/docs/…
Те, кто не поддерживает will-change, могут использовать translateZ(0)

Аппаратное ускорение не является панацеей.Создание составного слоя само по себе имеет свою стоимость.Каждый раз при создании составного слоя для него должна выделяться память.Размер памяти зависит от количества составных слоев.

Размер составного слоя Управление слоем также более сложное, что более очевидно на некоторых недорогих и терминальных мобильных устройствах.Злоупотребление ускорением графического процессора может привести к зависанию страницы или даже к сбою.

Не злоупотребляйте аппаратным ускорением

Неявный синтез

Есть два абсолютно позиционированных элемента a, b, они частично перекрываются, a находится ниже b выше, если вы добавите атрибут translateZ(0) или другие атрибуты к a, чтобы элемент a продвигался на слой композиции, то для того, чтобы держать a ниже При таком отношении к b элемент b также продвигается на слой композиции.

Например:

<style>
    .box1 {
        width: 100px;
        height: 100px;
        background-color: #999;
        position: absolute;
        left: 100px;
        top: 100px;
        transform: translateZ(0);
    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: #666;
        position: absolute;
        z-index: 10;
        left: 180px;
        top: 180px;
    }
</style>

<body>
    <div class="box1">a</div>
    <div class="box2">b</div>
</body>

</html>

На приведенном выше рисунке элемент a продвигается на уровень синтеза, поскольку он имеет низкий уровень, чтобы сохранить исходную иерархическую связь, b также будет переведен на уровень синтеза.

Я сделал крайний пример, взяв за пример сайт Таобао, консоль продвигает все элементы в составной слой

*{
	 transform: translateZ(0)
 }

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

Если ваш существующий проект не так гладок на некоторых младших или терминальных мобильных устройствах, вы можете проверить, вызвано ли это неявным синтезом, Вы можете проверить это с помощью инструментов отладки.

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

использовать запросAnimationFrame

window.requestAnimationFrame()Сообщите браузеру, что вы хотите выполнить анимацию, и попросите браузер вызвать указанную функцию обратного вызова, чтобы обновить анимацию перед следующей перерисовкой. Этот метод должен передать функцию обратного вызова в качестве параметра, функция обратного вызова будет выполнена до следующей перерисовки браузера.

Используйте requestAnimationFrame вместо setTimeout или setInterval для выполнения визуальных изменений, таких как анимация, чтобы избежать потери кадров и заикания.

Примечание. Не вызывайте свойства или методы, которые вызовут принудительную синхронную компоновку в функции обратного вызова.

использовать requestIdleCallback

window.requestIdleCallback()Метод ставит в очередь функции, которые вызываются в период простоя браузера. Это позволяет разработчикам выполнять фоновую и низкоприоритетную работу в основном цикле событий, не влияя на критичные к задержке события, такие как анимация и ответы ввода. Функции обычно выполняются в порядке первого вызова, однако, если функция обратного вызова указывает время ожидания выполнения. timeout, можно перетасовать порядок выполнения, чтобы выполнить функцию до истечения времени ожидания.

существуетrequestIdleCallbackФрагмент документа создается в обратном вызове следующего кадра, а затем в следующем кадре.requestAnimationFrameОбратные вызовы вносят реальные изменения в DOM.

разное

Есть еще много других, которые не перечислены один за другим, вот лишь некоторые из них:

Примените эффект анимации к элементу, чье свойство position является абсолютным или фиксированным, и сделайте уровень z-index немного выше.
вместо этого верхний левый использует преобразование.
Избегайте выражений CSS/например: calc.
Используйте более эффективный селектор, такой как селектор класса. Также опционально используйте спецификацию БЭМ (Блок, Элемент, Модификатор).

Суммировать

В этой статье описываются принципы перекомпоновки и перерисовки с точки зрения процесса рендеринга в браузере. С помощью инструмента отладки производительности вы можете более интуитивно почувствовать пять ключевых путей пиксельного конвейера. В конце статьи приведены распространенные примеры оптимизация перекомпоновки и перерисовки.Надеюсь Вам Полезно,есть неточности и неточности местами,прошу исправлять!

Ссылка на ссылку

Как работают браузеры: за кулисами современных веб-браузеров

производительность рендеринга

Вы действительно понимаете рефлюкс и перерисовываете его

Краткое описание процесса рендеринга в браузере и Composite (объединение слоев рендеринга)

работы с открытым исходным кодом

Zhengcaiyun интерфейсный таблоид

адрес с открытым исходным кодомwww.zoo.team/openweekly/(На главной странице официального сайта таблоида есть группа обмена WeChat)

Карьера

ZooTeam, молодая, увлеченная и творческая команда, связанная с отделом исследований и разработок продукции Zhengcaiyun, базируется в живописном Ханчжоу. В настоящее время в команде более 50 фронтенд-партнеров, средний возраст которых составляет 27 лет, и почти 30% из них — инженеры с полным стеком, настоящая молодежная штурмовая группа. В состав членов входят «ветераны» солдат из Ali и NetEase, а также первокурсники из Чжэцзянского университета, Университета науки и технологий Китая, Университета Хандянь и других школ. В дополнение к ежедневным деловым связям, команда также проводит технические исследования и фактические боевые действия в области системы материалов, инженерной платформы, строительной платформы, производительности, облачных приложений, анализа и визуализации данных, а также продвигает и внедряет ряд внутренних технологий. Откройте для себя новые горизонты передовых технологических систем.

Если вы хотите измениться, вас забрасывают вещами, и вы надеетесь начать их бросать; если вы хотите измениться, вам сказали, что вам нужно больше идей, но вы не можете сломать игру; если вы хотите изменить , у вас есть возможность добиться этого результата, но вы не нужны; если вы хотите изменить то, чего хотите достичь, вам нужна команда для поддержки, но вам некуда вести людей; если вы хотите изменить установившийся ритм, это будет "5 лет рабочего времени и 3 года стажа работы"; если вы хотите изменить исходный Понимание хорошее, но всегда есть размытие того слоя оконной бумаги.. , Если вы верите в силу веры, верьте, что обычные люди могут достичь необыкновенных вещей, и верьте, что они могут встретить лучшего себя. Если вы хотите участвовать в процессе становления бизнеса и лично способствовать росту фронтенд-команды с глубоким пониманием бизнеса, надежной технической системой, технологиями, создающими ценность, и побочным влиянием, я думаю, что мы должны говорить. В любое время, ожидая, пока вы что-нибудь напишете, отправьте это наZooTeam@cai-inc.com

предисловие

Процесс рендеринга в браузере

Основной процесс движка рендеринга WebKit

визуализировать дерево

Принцип оплавления и перекраски

что такое рефлоу

Глобальный макет и добавочный макет

что такое перекрасить

порядок розыгрыша

Отладка с помощью инструментов производительности

пиксельный конвейер

Как уменьшить перекомпоновку и перерисовку

Уменьшить макет принудительной синхронизации

Избегайте частых манипуляций с DOM

Включить ускорение графического процессора

Как включить аппаратное ускорение?

Не злоупотребляйте аппаратным ускорением

Неявный синтез

использовать запросAnimationFrame

использовать requestIdleCallback

разное

Суммировать

Рекомендуемое чтение

работы с открытым исходным кодом

Карьера