Что такое DOM reflow?

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

Заявление было

display: none вызывает перезагрузку DOM, где visibility: hidden нет.

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

Что такое перезапуск DOM и как он работает?

Ответы

Ответ 1

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

Reflow происходит, когда вы:

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

Для получения дополнительной информации см. здесь: Repaints and Reflows: Ответственно за манипулирование DOM

Ответ 2

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

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

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

Ответ 3

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