Говоря о рендеринге в браузере, перекомпоновке и перерисовке

резюме

1. Характер рендеринга браузера;
2. Представляем оплавлениеreflowи перерисоватьrepaint;
3. как оптимизировать производительность;

рендеринг в браузере

Обычная веб-страница, которую браузер должен создать перед рендерингом.DOM(объектная модель документа) иCSSOM(объектная модель css) дерево.

DOM

DOMКак появилось дерево? Давайте сначала предположим, что есть веб-страница, состоящая из текста и картинки:

Браузер пройдет через:

• конвертировать: Браузер считывает необработанные байты HTML с диска или из сети и преобразует их в отдельные символы в соответствии с указанной кодировкой файла.
• токенизация: Браузер преобразует строку в различные токены, указанные в стандарте W3C, такие как "", "" и другие строки в угловых скобках. Каждый токен имеет особое значение и набор правил.
• лексический анализ: токены преобразуются в «объекты», определяющие их свойства и правила.
• строительство ДОМ: поскольку теги HTML определяют отношения между различными тегами (некоторые теги содержатся внутри других тегов), созданные объекты связаны внутри древовидной структуры данных, которая также фиксирует отношения родитель-потомок, определенные в тегах: объекты HTML являются родительскими объектами тела, body является родителем объекта абзаца и так далее.

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

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

CSSOM

Как и в случае с HTML, движку браузера необходимо преобразовать полученные правила CSS во что-то, что браузер сможет понять и обработать.

CSSБайты преобразуются в символы, затем в токены и узлы и, наконец, связанные в структуре дерева, называемую модель объекта CSS (CSSOM). ПостроитьCSSOMДерево — очень ресурсоемкий процесс.

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

переплавкаreflowи перерисоватьrepaint

reflowНекоторые места переводятся в перестановки.

Redraw понимает буквальное значение: область перерисовки.

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

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

Перекомпоновка: операции с DOM приводят к изменениям таких свойств, как размер DOM (например, изменениеwidth,height,top), браузеру необходимо пересчитать атрибуты элемента, а затем отобразить результат вычисления, этот процесс называется перекомпоновкой.

Общие операции, вызывающие обратный поток:

• Страница загружается в первый раз
• Изменение размера окна браузера
• Изменение размера или положения элемента
• Изменения содержимого элемента
• Изменение размера шрифта элемента
• Добавить или удалить элементы DOM
• Запрос или вызов определенного метода свойства

Суммировать:

1. Оплавление часто дороже, чем перекраска;
2. Перерисовка должна быть перерисована, а перерисовка может не обязательно перерисовываться.

Оптимизирован для современных браузеров

Поскольку частые модификацииDOMилиCSSOMЭто само по себе очень требовательно к производительности, и большинство современных браузеров сделали для них определенные оптимизации. Например, ряд операций будет помещен в механизм очереди для пакетного обновления макета.По крайней мере, один кадр обновления браузера 16 мс (то есть частота обновления большинства экранов дисплея составляет 60 Гц, а интервал обновления составляет 1000 мс/60). ) для очистки очереди (дросселирование).оптимизация ~).

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

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

Оптимизируйте перекомпоновку и перерисовку

• избегать использованияCSSвыражение;
• использоватьtransformзаменятьtop;
• Аппаратное ускорение CSS3 (ускорение GPU);
• Управление DOM в автономном режиме: Извлеките элемент из потока документа, а затем измените элемент, что вызовет только перерисовку, а не перекомпоновку.
  • display:none: Временно удалить элемент из документооборота, выполнить пакетные операции и затем вернуть его обратно. Будет только один обратный поток;
  • createDocumentFragment: создать фрагмент документа и одновременно поместить содержимое в документ;
• как можно большеDOMКонец дерева измененийclass: уменьшить диапазон обратного потока;
• Применение анимационных эффектов кpositionсобственностьabsoluteилиfixedНа элементе избегайте влияния на макет других элементов, это просто перерисовка, а не перекомпоновка;
• JS избегает частых причин рефлюкса для чтения/перерисовки свойства: если вы часто используете, вы можете использовать переменную для его кэширования.

Подписывайтесь на нас