Что именно обновляется при манипулировании DOM
Я пытаюсь понять, что именно обновляется в обычном DOM после манипуляции с DOM.
Предположим, у нас есть DOM ниже, и я использую javascript для удаления li с классом blue.
Означает ли это, что браузер смотрит на родительский элемент синего класса (например, идентификатор списка 1) и повторно отображает этот узел DOM, включая всех дочерних элементов (за исключением синего класса), а затем перерисовывает всю страницу на основе любых правил css?
Я бы подумал, что это будет процесс, но я не был уверен и нигде не могу найти никаких конкретных примеров.
<div>
<ul id = "list1">
<li> red </li>
<li class = "blue"> blue </li>
<li> green </li>
</ul>
<ul id = "list2">
<li> orange </li>
<li> gray </li>
<li> brown </li>
</ul>
</div>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Да, потому что это единственный способ удалить элемент ... через его родительский элемент, то есть .removeChild(). Тогда DOM может или не может подвергнуться так называемой Reflow, в зависимости от того, какие изменения в результате произойдут.
DOM не обязательно подвергается перекомпоновке. Если в конце манипуляции с DOM никаких изменений не произошло (например, из-за того, что вы выполнили child.remove(); parent.append(child);, и если вы не вызвали один из методов / свойств триггеров перекомпоновки, то перекомпоновки происходить не должно.
Это не так просто, потому что вы, вероятно, не совсем понимаете, как работает Обновление DOM + процесс рендеринга.
DOM - это просто объект javascript, как и любой другой.
Когда вы выполняете манипуляции с DOM, это действительно похоже на то, как если бы вы изменили свойства простого объекта (сложный, но все же).
Некоторые из этих манипуляций действительно могут испортить макет страницы и визуализированный фрейм, но в целом браузеры будут ждать, пока им действительно придется выполнить операцию перерисовки, прежде чем запускать оба этих алгоритма. Это означает, что эти алгоритмы не будут запускаться при каждой отдельной манипуляции с DOM.
Итак, чтобы ответить на вопрос, при манипулировании DOM вы изменяете свойства объекта js и, возможно, устанавливаете флаг, позволяющий узнать как пересчет макета, так и средство визуализации, которое им придется задействовать при следующем обновлении экрана.
Когда эти пересчет макета (a.k.a оплавление) и операции перерисовки на самом деле срабатывают, это не связано никакими спецификациями, и это то самое место, которое большинство браузеров попытается оптимизировать, и, следовательно, трудно сказать однозначно, как они работают повсюду. (Хотя указано, что перекомпоновка в некоторых случаях должна выполняться синхронно) .
Но мы можем предположить, что если ничего не изменилось, это, по крайней мере, будет сокращено.
Например, если в вашем примере #list1 имеет CSS-свойство display, установленное на none, то перерисовывать будет нечего, то же самое, если вы повторно добавили элемент .blue синхронно.
Проще говоря,
// js execution
DOM manip => mark layout as dirty
DOM manip => mark layout as dirty
... there may be a lot here
// Before screen refresh
if (layout.isDirty())
layout.recalc() // will itself mark repaint as dirty if needed
if (renderer.isDirty())
rendered.repaint()
Это именно то, что должен делать браузер.