Переплавка и перекраска, KFC и MC

новое хранилище знанийПередняя часть от входа до входаПросите внимания, помечайте звездочками и предложениями и время от времени обновляйте~

Эта статья включена в:Большое путешествие по построению фундамента с нуля (подробное объяснение, постоянное обновление~)

Перекомпоновка и перерисовка повлияют на производительность страницы.Эти два будут упоминаться каждый раз в одно и то же время.Взаимосвязь настолько близка, насколько должен быть MC рядом с KFC.

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

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

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

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

Чтобы построить дерево рендеринга, браузер в основном выполняет следующую работу:

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

В дерево рендеринга будут включены только видимые узлы. К невидимым узлам относятся:

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

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

Поскольку браузеры используют плавные макеты,Render TreeВычисление обычно нужно пройти только один раз, ноtableза исключением их внутренних элементов, которые могут потребовать нескольких вычислений

переплавка

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

перерисовать

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

Когда происходит перерисовка оплавления

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

Действия, вызывающие перекомпоновку:

• первый рендер страницы
• Изменился размер окна браузера
• Изменения размера или положения элемента (включая поля, внутренние границы, размер границы, высоту и ширину и т. д.)
• Содержимое элемента изменяется (количество текста или размер изображения, например, пользователь вводит текст в поле ввода и т. д.)
• Изменение размера шрифта элемента
• добавить или удалитьвидимыйизDOMэлемент
• активацияCSSпсевдоклассы (например::hover）
• запрашивать определенные свойства или вызывать определенные методы

Когда изменение стиля элемента на странице не влияет на его положение в потоке документов (например:color,background-color,visibilityд.), браузер назначит элементу новый стиль и перерисует его, этот процесс называется перерисовкой.

Reffull привернут перерисоту, и не обязательно будет перерисован рефлюкс

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

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

Большинство браузеров оптимизируют процесс перекомпоновки, ставя изменения в очередь и выполняя их пакетами. :

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

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

• offsetTop, offsetLeft, offsetWidth, offsetHeight
• scrollTop, scrollLeft, scrollWidth, scrollHeight
• clientTop, clientLeft, clientWidth, clientHeight
• getComputedStyle()
• getBoundingClientRect

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

Ручная оптимизация

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

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

2. Избегайте частых операцийDOM,СоздаватьdocumentFragment, на него распространяются всеDOM操作и, наконец, добавьте его в документ.

   Узел DocumentFragment не принадлежит дереву документа, до его вставки в узел документа добавление или удаление узлов не приведет к перекомпоновке.

   Аналогичный эффект дает использование cloneNode и replaceChild.

3. Сначала установите элементdisplay: none, и отображать его после завершения операции. Потому чтоdisplayсобственностьnoneвыполняется на элементахDOMОперации не вызывают перекомпоновки и перерисовки.

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

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

6. избегать использованияCSSвыражения (например:calc())

7. Избегайте использования макета таблицы

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

8. аппаратное ускорение css3 (ускорение графического процессора)

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

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

• Давайте поговорим о характеристиках атрибута положения css и его значении атрибута sticky (эффект потолка)
  Я не знал, что это значение свойства существовало раньше. . .

• окно просмотра и 1px | инструментщик: это 1px, дизайнер: нет, это не
  Я не умею проектировать, но умею спорить

• Съедобный "сухой товар css layout", чистый пример HTML, отлаживаемый | горизонтальный, вертикальный, многоколоночный
  Можно смотреть, можно отлаживать, можно забрать, это единственное, ветки нет

• «Каскадный контекст CSS», который интерфейс должен освоить
  Девушка и кот, кого вы хотите?

• Sass.vs.Less | Введение и сравнение
  Я просто пишу, вы просто посмотрите, как оно?

если вы получитеновые знания, или собранныйкрасивая картинка слева, Пожалуйста, нажмитеотличныйНу~

Вышеупомянутое содержание относится к следующей информации, если есть какое-либо сходство, это нормально. . \(Это предложение действительно хорошее~\)

Справочная документация:

1. Перекомпоновать и перекрасить
2. Вы действительно понимаете reflow и redraw?
3. Браузерная перекомпоновка и перерисовка
4. Перекомпоновка и перерисовка: производительность CSS замедляет работу JavaScript?