Что такое 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.