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

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

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

display: none вызывает перекомпоновку DOM, а visibility: hidden — нет.

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

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


html css dom visibility reflow
person Suresh Karia    schedule 24.12.2014    source источник
comment
видимость: скрытый держит объект в пространстве, поэтому браузеру не нужно пересчитывать позицию элемента dom   -  person Hacketo    schedule 24.12.2014
comment
Проще говоря, DOM Reflow — это когда вашему браузеру необходимо пересчитать положение/размер ваших элементов DOM для отображения страницы. В вашем конкретном примере вы, вероятно, заметили, что элемент visibility: hidden кажется все еще там (пространство, необходимое для его отображения, все еще занято, он все еще находится в потоке, просто невидим), в то время как элемент display: none полностью выводит ваш элемент из потока .   -  person Laurent S.    schedule 24.12.2014
comment
Я пришел сюда, увидев точное утверждение.   -  person Jry9972    schedule 05.10.2018

Ответы (3)


arrow_upward
115
arrow_downward

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

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

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

Для получения дополнительной информации см. здесь: Перерисовка и перекомпоновка: ответственное обращение с DOM

person Karlen Kishmiryan    schedule 24.12.2014
comment
анимация элемента DOM не обязательно вызывает перекомпоновку, например. если вы используете свойство CSS3 для преобразования, перекомпоновка не происходит - person Nitish; 16.01.2017
comment
Изменение visibility на none не является изменением стиля CSS? - person Qwerty; 26.09.2017
comment
@Qwerty Существует множество изменений стиля, которые могут вызвать перекомпоновку, поэтому я думаю, именно поэтому они говорят, что стиль CSS меняется глобально. - person Karlen Kishmiryan; 19.12.2018

arrow_upward
15
arrow_downward

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

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

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

person Vitorino fernandes    schedule 24.12.2014

arrow_upward
1
arrow_downward

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

person degr    schedule 24.12.2014