什么时候DOM重绘在JavaScript例程？ [英] When does the DOM repaint during Javascript routines?

问题描述

如果这个问题已经存在，我们深表歉意，但我找不到。

I apologize if this question already exists, but I couldn't find it.

在下面的代码中，页面回流/ ，假设在每个点更新DOM对象？

In the following code, at which points will a page reflow/repaint be triggered, assuming a DOM object is updated at each point?

(function() {

  //POINT A

  for (var a=0; a<2; a++) {

    //POINT B

    for (var b=0; b<2; b++) {
      //POINT C
    }
    //POINT D

    for (var b=0; b<2; b++) {
      //POINT E
    }
    //POINT F

  }

  //POINT G

})();

//POINT H

本质上，我不确定DOM有能力在中间的函数，循环等更新。它可以更新每次元素被移动？只有退出循环后？所有活动循环退出后？

Essentially, I'm not sure if the DOM has the ability to update in the middle of functions, loops, etc. Can it update every time an element is moved? Only after exiting loops? After all active loops have exited? After all functions have finished?

推荐答案

默认情况下，浏览器将等待当前执行线程完成，并执行一个合并的回流和重绘（因为这被认为比执行许多回流和重绘更有效）。这没有在任何规范中指定，所以浏览器可以实现它想要的。

By default, the browser will wait until the current thread of execution finishes and do one consolidated reflow and repaint (as this is considered more efficient than doing many reflows and repaints). This is not specified in any specification so the browser can implement as it wants to.

但是，有一些特定的操作，通常会触发回流（有时重绘）。这些操作是仅当已经完成精确回流时才能完成的操作（请求与元素的位置相关的某些属性）。因此，可以通过请求这些属性之一手动触发回流。

But, there are some specific operations that will generally trigger a reflow (and sometimes a corresponding repaint). These operations are operations (requesting certain properties related to the position of elements) which can only be completed when an accurate reflow has been done. So, it is possible to manually trigger a reflow by requesting one of these properties.

例如，请求 .offsetHeight

For example, requesting the .offsetHeight property of a non-absolutely positioned element will force a pending reflow at that point.

在此处触发暂挂回流的其他属性： DOM元素属性可能会导致浏览器执行回流操作何时修改？

Other properties that trigger a pending reflow here: Which DOM element properties can cause the browser to perform a reflow operation when modified?

此处的另一个属性列表： http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html

Another list of properties here: http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html

这篇关于什么时候DOM重绘在JavaScript例程？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！