Что такое 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 для демонстрации перекомпоновки.

Читайте также:  SRE или DevOps: в чем разница?

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-дерево

Дерево рендеринга: это дерево представляет визуальную часть дерева 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>
Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector