Что такое DOM reflow?

В этой статье мы узнаем о перекомпоновке DOM (объектная модель документа). Объектная модель документа (DOM) — это программный интерфейс для документов HTML (язык гипертекстовой разметки) и XML (расширяемый язык разметки). Он определяет логическую структуру документов и способ доступа к документу и управления им.

Что такое reflow?

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

Перекомпоновка происходит путем выполнения следующей задачи:

Когда вы вставляете, удаляете или обновляете элемент в DOM.
Когда вы изменяете содержимое страницы, например текст в поле ввода.
Когда вы перемещаете элемент DOM.
Когда вы анимируете элемент DOM.
Когда вы измеряете элемент, такой как HTML DOM offsetHeightили метод JavaScript getComputedStyle().
Когда вы меняете стиль CSS.
Когда вы меняете имя класса элемента.
Когда вы добавляете или удаляете таблицу стилей.
При изменении размера окна.
Когда вы прокручиваете веб-страницу.
При смене шрифта.
Когда вы активируете псевдоклассы CSS,такие как :hover.
Когда вы устанавливаете свойство атрибута стиля.

Чтобы свести к минимуму перекомпоновку DOM, вы можете выполнить следующую задачу:

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

Пример 1. В приведенном ниже коде мы будем использовать свойство CSS display: none для демонстрации перекомпоновки.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>GeeksforGeeks</title>

</head>

<body>

    <center>

        <h1 style="color:green;">GeeksforGeeks</h1>

        <h3>A computer science portal for geeks</h3>

        <p>

            This is the paragraph.<br>

            ....<br>

            ....<br>

            ....<br>

        </p>

        <div style="display:none">

            Secret message

        </div>

        <div><img src=

"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png" />

        </div>

    </center>

</body>

</html>

Дерево DOM: это дерево представляет этот HTML-документ, в основном имеет один узел для каждого тега и один текстовый узел для каждого фрагмента текста между узлами.

DOM-дерево

Дерево рендеринга: это дерево представляет визуальную часть дерева DOM, и в визуальной части отсутствуют некоторые элементы.

Пример 2: В приведенном ниже коде мы изменим размер шрифта. Если вы измените какое-либо измерение внутри HTML-страницы.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>GeeksforGeeks</title>



    <style>

        .gfg1 {

            font-size: 20px;

            font-size: 30px;

        }

    </style>

</head>

<body>

    <center>

        <h1 style="color:green;">

            GeeksforGeeks

        </h1>

        <h3>A computer science portal for geeks</h3>

        <p class="gfg1">

            This is the paragraph.

        </p>

    </center>

</body>

</html>