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

问题描述

在下面的代码中，页面回流/重新绘制将被触发，假设DOM对象在每个点更新？

 （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具有在函数，循环等中更新的能力。每次元素移动时，是否可以更新？只有退出循环后？所有活动循环是否退出？所有功能完成后？

解决方案

默认情况下，浏览器将等到当前执行线程完成并执行一次合并回流并重绘（因为这被认为比做许多回流和重绘更有效率）。这不是在任何规范中指定，所以浏览器可以按照要求实现。

但是，有一些具体的操作通常会触发回流（有时是相应的重绘）。这些操作是操作（请求与元素的位置相关的某些属性），只有在精确回流完成时才能完成。因此，可以通过请求其中一个属性来手动触发回流。

例如，请求 .offsetHeight 属性将强制在该点处等待回流。

其他属性会触发等待回流：哪些DOM元素属性可导致浏览器执行回流操作何时修改？

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

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

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

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.

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

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

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

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