javascript - 操作 DOM 时究竟更新了什么

Question

我试图准确了解在 DOM 操作后使用常规 DOM 更新的内容。

假设我们有下面的 DOM，我使用 javascript 删除类为 blue 的 li。

这是否意味着浏览器会查看 blue 类的父级(例如:列表 1 的 id)并重新呈现包含所有子级(减去 blue 类)的 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>

Answer 1

这并不是那么容易，这是因为您可能不太了解 DOM 更新 + 渲染过程的工作原理。

与其他对象一样，DOM 只是一个 javascript 对象。

当您进行 DOM 操作时，它真的就像您确实修改了一个普通对象的属性(一个复杂的属性，但仍然如此)。

其中一些操作确实会弄脏页面的布局和呈现的框架，但通常浏览器会等到它们确实必须执行重绘操作时才会触发这两种算法。这意味着这些算法不会在每次单独的 DOM 操作时触发。

所以要回答这个问题，当操作 DOM 时，您正在更改 js 对象的属性，并可能设置一个标志，让他们知道在下次屏幕刷新时必须启动的布局重新计算和渲染器。

当这些布局重新计算(又名回流)和重绘操作实际启动时，不受任何规范的约束，这是大多数浏览器会尝试的地方优化，因此很难对它们如何在任何地方工作有一个明确的说法。 (虽然指定in some cases回流应该同步启动)。
但是我们可以假设，如果可渲染的内容没有发生任何变化，那么这些至少是捷径。

例如，如果在您的示例中 #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()