Что именно обновляется при манипулировании DOM

Я пытаюсь понять, что именно обновляется с помощью обычного DOM после манипуляций с DOM.

Предположим, у нас есть DOM ниже, и я использую javascript для удаления li с классом blue.

Означает ли это, что браузер просматривает родителя класса blue (например, id списка 1) и повторно отображает этот узел DOM, включая все дочерние элементы (за исключением класса blue), а затем перерисовывает всю страницу на основе каких-либо правил 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>
Источник

2 ответа

Решение

Это не так просто, и это потому, что вы, вероятно, не совсем понимаете, как работает процесс обновления + рендеринга DOM.

DOM - это просто объект javascript, как и любой другой.

Когда вы делаете манипуляции с DOM, это действительно так же, как если бы вы изменили свойства простого объекта (сложные, но все же).

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

Таким образом, чтобы ответить на вопрос, когда DOM манипулируют, вы изменяете свойства объекта js и, возможно, устанавливаете флаг, позволяющий узнать как вызов макета, так и средство визуализации, которое они должны будут активировать при следующем обновлении экрана.

Когда эти операции макета (переименование) и операции перерисовки фактически включаются, не связаны никакими спецификациями, и это то самое место, которое большинство браузеров будут пытаться оптимизировать, и, следовательно, трудно точно определить, как они работают везде. (Хотя указано, что в некоторых случаях оплавление должно срабатывать синхронно).
Но мы можем предположить, что если ничто не может быть изменено, то они будут, по крайней мере, сокращены.

Например, если в вашем примере #list1 имел свой display CSS-свойство установлено в 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()
Источник

Да, потому что это единственный способ удалить элемент... через его родительский элемент, т. Е. .removeChild(), В этом случае DOM может или не может пройти то, что называется Reflow, в зависимости от того, какие изменения происходят.

Источник
Другие вопросы по тегам