当操作DOM时，确切更新的内容 [英] What exactly updates when the DOM is manipulated

问题描述

我试图确切地了解在DOM操作之后使用常规DOM更新的内容.

假设我们下面有DOM，我使用javascript删除了蓝色类的li.

这是否意味着浏览器查看blue类的父级(例如:列表1的id)，然后重新渲染包括所有子级的DOM节点(减去blue类)，然后根据任何CSS重新绘制整个页面规则?

我认为这将是一个过程，但是我不确定，也无法在任何地方找到任何具体的例子.

 < div>< ul id ="list1">< li>红色</li>< li class ="blue">蓝色</li>< li>绿色</li></ul>< ul id ="list2">< li>橙色</li>< li>灰色</li>< li>棕色</li></ul></div> 

解决方案

这并不是那么容易，这是因为您可能不太了解 DOM更新+呈现过程的工作方式./p>

DOM就像其他任何对象一样，只是一个javascript对象.

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

其中一些操作确实可能弄脏了页面的布局和渲染的框架，但通常浏览器会等到它们确实必须执行重新绘制操作之后，才触发这两种算法.这意味着这些算法不会在每次单独的DOM操作时都被触发.

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

当这些 layout recalc (又名 reflow )和重绘操作实际上不受任何规范约束时，这是大多数浏览器将尝试使用的地方进行优化，因此很难确切说明它们在各个地方的工作方式.(尽管已指定在某些情况下回流应该同步进行).
但是我们可以假设，如果可渲染的对象没有任何变化，那么这些将至少是捷径.

例如，如果在您的示例中#list1 的CSS属性设置为 none ，那么很可能就没有任何东西可做了.重新绘制，如果您确实同步重新添加了 .blue 元素，则进行重新绘制.

简而言之，

 //js执行DOM manip =>将布局标记为脏DOM manip =>将布局标记为脏...这里可能有很多//在刷新屏幕之前if(layout.isDirty())layout.recalc()//如果需要，本身会将重绘标记为脏if(renderer.isDirty())rendering.repaint() 

I am trying to understand exactly what is updated with the regular DOM after a DOM manipulation.

Suppose we have the DOM below and I use javascript to delete the li with the class blue.

Does this mean that the browser looks at the parent of class blue (eg: id of list 1) and re-renders that DOM node including all the children (minus class blue) and then repaints the whole page based on any css rules?

I would think that would be the process but I wasn't sure and can't find any concrete examples anywhere.

 <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>

解决方案

That's not all that easy, and this is because you are probably not quite understanding how the DOM update + rendering process works.

The DOM is just a javascript object, like any other.

When you do DOM manips, it's really just like if you did modify a plain-object's properties (a complex one, but still).

Some of these manips may indeed dirty the page's layout and rendered frame, but in general browsers will wait until they really have to perform the repaint operation before triggering both these algorithms. This means that these algorithms won't be triggered at every individual DOM manipulation.

So to answer the question, when the DOM is manipulated, you are changing a js object's properties and possibly setting a flag letting know both the layout recalc and the renderer that they will have to kick in at next screen refresh.

When these layout recalc (a.k.a reflow) and repaint operations actually kick in is not tied by any specs, and it is the very place that most browsers will try to optimize and hence it's hard to have a definitive word on how these work everywhere. (Though it is specified that in some cases reflow should kick synchronously).
But we can assume that if nothing renderable has changed, these will at least be short-cut.

For instance, if in your example #list1 had its display CSS-property set to none, then there might well be nothing to repaint, same if you did re-append the .blue element synchronously.

To put it in a bit less wordy way,

// 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()

这篇关于当操作DOM时，确切更新的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！