javascript - DOM 何时在 Javascript 例程期间重绘？

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 属性将在该点强制进行挂起的重排。

在此处触发待定回流的其他属性: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