Что такое дом оплавления?

Я читал о разнице между двумя свойствами css display:none и visibility:hidden и столкнулся с термином DOM reflow.

Утверждение было

display: none вызывает DOM reflow where is visibility: hidden doesn'T.

Итак, мой вопрос:

Что такое DOM reflow и как он работает?

3 39
html css dom reflow visibility

3 ответа:

A reflow вычисляет макет страницы. Reflow на элементе пересчитывает размеры и положение элемента,а также запускает дальнейшие reflows на дочерних элементах, предках и элементах, которые появляются после него в DOM. Затем он вызывает окончательную перекраску. Оплавление очень дорого, но, к сожалению, его можно легко запустить.

Оплавление происходит, когда вы:

  • вставить, удалить или обновить элемент в DOM
  • изменение содержимого страницы, например текста в поле ввода
  • переместить элемент DOM
  • анимировать элемент DOM
  • Возьмите измерения элемента, такого как offsetHeight или getComputedStyle
  • изменение стиля CSS
  • изменение имени класса элемента
  • добавление или удаление таблицы стилей
  • изменение размера окна
  • прокрутка

Для получения дополнительной информации, пожалуйста, обратитесь сюда: перекраски и перепрошивки: манипулирование DOM ответственно

60

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

Https://developers.google.com/speed/articles/reflow

display:none Скрыть div, как будто div не отображается, тогда как visibility:hidden только скрывает, но пространство все еще занято

6

Это означает, что если вы зададите динамически display: none;, Ваш браузер пересчитает позиции элементов DOM, если видимость: скрыта; - нет. Думаю, это потому, что visibility: hidden; не изменяет размеров элементов в dom.

0