Что такое перекомпоновка DOM?

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

Что такое рефлоу?

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

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

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

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

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

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

Выход:

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

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

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

Выход: