在Javascript例程中DOM何时重绘？

Question

如果这个问题已经存在,我道歉,但我找不到它.

在下面的代码中,假设在每个点更新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是否能够在函数,循环等中间进行更新.每次移动元素时它都能更新吗？只有退出循环后？所有活动循环退出后？所有功能完成后？

Answer 1

默认情况下,浏览器将等到当前执行线程完成并执行一次合并重排并重新绘制(因为这被认为比执行许多重排和重绘更有效).这在任何规范中都没有指定,因此浏览器可以按照自己的意愿实现.

但是,有一些特定的操作通常会触发回流(有时是相应的重绘).这些操作是操作(请求与元素位置相关的某些属性),只有在完成精确回流时才能完成.因此,可以通过请求其中一个属性来手动触发重排.

例如,请求.offsetHeight非绝对定位元素的属性将强制在该点处进行挂起的重排.

在此处触发挂起重排的其他属性:哪些DOM元素属性可以导致浏览器在修改时执行重排操作？

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