Перерисовка браузера (repaint), перекомпоновка (reflow) и оптимизация [механизм браузера]

внешний интерфейс браузер
Перерисовка браузера (repaint), перекомпоновка (reflow) и оптимизация [механизм браузера]

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

блог,Документы внешнего накопления,Нет публики,GitHub

Процесс создания веб-страницы:

  1. HTML анализируется в дерево DOM парсером HTML
  2. CSS анализируется в дереве CSSOM с помощью синтаксического анализатора CSS.
  3. Объедините дерево DOM и дерево CSSOM для создания дерева рендеринга.
  4. Генерировать компоновку (поток), то есть плоскую композицию всех узлов всех деревьев рендеринга
  5. нарисовать макет на экране

Шаги 4 и 5 — самые трудоемкие части. Вместе эти два шага — это то, что мы обычно называемоказывать.

Я нашел изображение в Интернете и добавил комментарий, чтобы сделать его более понятным:

Оказывать:

Когда веб-страница создана, она будет отображаться хотя бы один раз..

В процессе доступа пользователя он будет продолжать перерисовываться

Повторный рендеринг требует повторения предыдущего шага 4 (восстановление макета) + шага 5 (перерисовка) или только шага 5 (перерисовка).

Reflow больше, чем перерисовка:

Большой в данном контексте означает: кто на кого может влиять?

  • Repaint: изменен внешний вид некоторых элементов, например: цвет заливки элемента
  • Reflow: регенерирует макет, переставляя элементы.

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

比如改变元素高度，这个元素乃至周边dom都需要重新绘制。

То есть:«Перерисовка» не обязательно ведет к «перерисовке», а «перерисовка» неизбежно приведет к «перерисовке».

Перекомпоновка:

концепция:

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

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

Обратный поток похож на бросок камня (изменение дома) в реку (поток документов), вызывающий рябь, а затем воздействующий на окружающую воду, поэтому он называется обратным потоком.

Общие свойства и методы, вызывающие перегруппировку

Любая операция, изменяющая геометрию элемента (положение и размер элемента), вызовет перекомпоновку., вот немного каштанов:

  1. Добавляйте или удаляйте видимые элементы DOM;
  2. Изменения размера элемента - поля, отступы, границы, ширина и высота
  3. Изменения содержимого, например ввод пользователем текста в поле ввода.
  4. Изменение размера окна браузера - когда происходит событие изменения размера
  5. Вычислить свойства offsetWidth и offsetHeight
  6. Установите значение свойства стиля
Общие свойства и методы, вызывающие перегруппировку
width height margin padding
display border position overflow
clientWidth clientHeight clientTop clientLeft
offsetWidth offsetHeight offsetTop offsetLeft
scrollWidth scrollHeight scrollTop scrollLeft
scrollIntoView() scrollTo() getComputedStyle()
getBoundingClientRect() scrollIntoViewIfNeeded()

Перестановка затрагивает ряд:

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

  • Глобальная область действия: от корневого узлаhtmlНачинает перекомпоновку всего дерева рендеринга.
  • Локальная область: повторное размещение части дерева рендеринга или объекта рендеринга.

глобальная перестановка области действия:

<body>
  <div class="hello">
    <h4>hello</h4>
    <p><strong>Name:</strong>BDing</p>
    <h5>male</h5>
    <ol>
      <li>coding</li>
      <li>loving</li>
    </ol>
  </div>
</body>

Когда на узле p происходит перекомпоновка, hello и body также перерисовываются, и затрагиваются даже h5 и ol.

Изменение локальной области видимости:

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

Максимально уменьшите количество перестановок и объем перестановок:

Переупорядочивание требует обновления дерева рендеринга, что очень затратно по производительности:

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

Стоимость переупорядочивания зависит от того, сколько узлов в дереве рендеринга необходимо перестроить:

Так что надо попробовать организовать в виде частичного макетаhtmlструктуру с минимальным влиянием на степень перегруппировки.

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

Перекрасить:

концепция:

Когда внешний вид элемента изменяется без изменения макета, процесс перерисовки внешнего вида элемента называется перерисовкой.

Общие свойства, вызывающие перерисовку:
color border-style visibility background
text-decoration background-image background-position background-repeat
outline-color outline outline-style border-radius
outline-width box-shadow background-size

Очередь рендеринга браузера:

Подумайте, сколько раз следующий код будет запускать рендеринг?

div.style.left = '10px';
div.style.top = '10px';
div.style.width = '20px';
div.style.height = '20px';

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

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

Принудительно очистить очередь:

div.style.left = '10px';
console.log(div.offsetLeft);
div.style.top = '10px';
console.log(div.offsetTop);
div.style.width = '20px';
console.log(div.offsetWidth);
div.style.height = '20px';
console.log(div.offsetHeight);

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

Т.к в очереди могут быть операции, влияющие на эти значения, чтобы выдать нам максимально точное значение, браузер сразу переупорядочивает + перерисовывает.

Принудительный запрос стиля для обновления очереди:

  1. offsetTop, offsetLeft, offsetWidth, offsetHeight
  2. scrollTop, scrollLeft, scrollWidth, scrollHeight
  3. clientTop, clientLeft, clientWidth, clientHeight
  4. getComputedStyle() или currentStyle IE

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

Предложения по оптимизации перекомпоновки

Как упоминалось выше, нам нужно максимально сократить количество перестановок и объем перестановок.Это очень общее.Вот несколько эффективных предложений, вы можете обратиться к ним.

1. Разделите операции чтения и записи

div.style.left = '10px';
div.style.top = '10px';
div.style.width = '20px';
div.style.height = '20px';
console.log(div.offsetLeft);
console.log(div.offsetTop);
console.log(div.offsetWidth);
console.log(div.offsetHeight);

Тем не менее код выше, который запускает 4 перестановки + перерисовки, на этот раз запускается только одна перестановка:

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

2. Централизованное изменение стиля

div.style.left = '10px';
div.style.top = '10px';
div.style.width = '20px';
div.style.height = '20px';

Хотя в большинстве браузеров сейчас есть оптимизация очереди рендеринга, не исключено, что некоторые браузеры и старые браузеры по-прежнему неэффективны:

Рекомендуется изменить стиль централизованно, изменив свойства класса или csstext.

// bad
var left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";
// good 
el.className += " theclassname";
// good
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

3. Информация о расположении кеша

// bad 强制刷新 触发两次重排
div.style.left = div.offsetLeft + 1 + 'px';
div.style.top = div.offsetTop + 1 + 'px';

// good 缓存布局信息 相当于读写分离
var curLeft = div.offsetLeft;
var curTop = div.offsetTop;
div.style.left = curLeft + 1 + 'px';
div.style.top = curTop + 1 + 'px';

4. Оффлайн изменить дом

  • скрыть дом, которым можно манипулировать

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

    dom.display = 'none'
// 修改dom样式
dom.display = 'block'

  • используяDocumentFragmentСоздаватьdomФрагменты, обрабатывайте DOM пакетами и добавляйте их в документ после завершения операции, что вызовет только перекомпоновку.

  • Дублируйте узел, поработайте над репликой и замените ее!

5. Атрибут позиции является абсолютным или фиксированным

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

6. Оптимизируйте анимацию

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

    Эффект анимации также должен пожертвовать некоторой плавностью в обмен на скорость, а промежуточная степень измеряется сама собой:

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

  • Включить ускорение GPU

    Эта часть исходит изОптимизируйте перекомпоновку и перерисовку CSS, а также производительность браузера.

    GPU (графический ускоритель):

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

    GPU-ускорение обычно включает в себя следующие части: Canvas2D, композицию макета, CSS3-переходы (transitions), CSS3-3D-преобразования (transforms), WebGL и видео (video).

    /*
 * 根据上面的结论
 * 将 2d transform 换成 3d
 * 就可以强制开启 GPU 加速
 * 提高动画性能
 */
div {
  transform: translate3d(10px, 10px, 0);
}

Эпилог

Реорганизация также является одним из ключевых факторов, приводящих к низкой эффективности выполнения DOM-скрипта.Реорганизация и перерисовка — часто задаваемые вопросы на собеседованиях на крупных фабриках, а связанная с этим оптимизация производительности — одна из основных концепций/навыков, которые должен выполнять фронтенд. Мастер (стучит по доске). !).

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

Я надеюсь, что друзья, которые прочитали это, могут нажать «Нравится» / «Подписаться», ваша поддержка — самая большая поддержка для меня.

блог,Документы внешнего накопления,Нет публики,GitHub

Выше 2018.12.17

Использованная литература:

Подробное объяснение управления производительностью веб-страницы

Оптимизируйте перекомпоновку и перерисовку CSS, а также производительность браузера.

Категории