DOM 何时在 Javascript 例程中重新绘制

When does the DOM repaint during Javascript routines?

本文关键字：新绘制 绘制 何时 Javascript 例程 DOM      更新时间：2023-09-26

如果这个问题已经存在，我很抱歉，但我找不到它。

在下面的代码中，假设每个点都更新了 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

相关文章：