Браузерная перекомпоновка и перерисовка

написать впереди

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

1. Браузер использует модель макета на основе потока.
2. Браузер будетHTMLанализируется вDOM,ПучокCSSанализируется вCSSOM,DOMиCSSOMобъединены для производстваRender Tree.
3. имеютRenderTree, мы знаем стили всех узлов, затем вычисляем их размер и положение на странице и, наконец, рисуем узлы на странице.
4. Поскольку браузеры используют плавные макеты,Render TreeВычисление , как правило, нужно пройти только один раз, ноtableза исключением их внутренних элементов, которые могут потребовать нескольких вычислений, обычно занимающих в 3 раза больше времени, чем эквивалентные элементы, поэтому вам следует избегать использованияtableОдна из причин макета.

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

Перекомпоновать

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

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

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

Некоторые общие свойства и методы, которые могут вызвать перекомпоновку:

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

Перекрасить

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

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

Переплавка дороже, чем перекраска.

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

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

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

Браузер немедленно очищает очередь при доступе к следующим свойствам или методам:

• clientWidth,clientHeight,clientTop,clientLeft

• offsetWidth,offsetHeight,offsetTop,offsetLeft

• scrollWidth,scrollHeight,scrollTop,scrollLeft

• width,height

• getComputedStyle()

• getBoundingClientRect()

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

как избежать

CSS

• избегать использованияtableмакет.
• насколько это возможноDOMКонец дерева измененийclass.
• Избегайте установки нескольких слоев встроенных стилей.
• Применение анимационных эффектов кpositionсобственностьabsoluteилиfixedна элементе.
• избегать использованияCSSвыражения (например:calc()).

JavaScript

• Избегайте частых манипуляций со стилями, лучше всего переписать их все сразуstyleили определите список стилей какclassи поменять все сразуclassАтрибуты.
• Избегайте частых операцийDOM,СоздаватьdocumentFragment, на него распространяются всеDOM操作и, наконец, добавьте его в документ.
• Вы также можете сначала установить элементdisplay: none, и отображать его после завершения операции. Так какdisplayсобственностьnoneвыполняется на элементахDOMОперации не вызывают перекомпоновки и перерисовки.
• Избегайте частого чтения свойств, которые вызовут перекомпоновку/перерисовку, и если вам действительно нужно использовать их несколько раз, кэшируйте их в переменной.
• Используйте абсолютное позиционирование для элементов со сложной анимацией, чтобы они не попадали в поток документа, иначе это вызовет частые перекомпоновки родительского элемента и последующих элементов.