避免 HTML 文档重排

我有数百个这样的“行”元素：

<div class='row'>
  <div class='cell'></div>
  <div class='cell'></div>
  <div class='cell'></div>
</div>

在页面上呈现它们之后，我需要获取它们的 clientHeight 。我知道“clientHeight”属性会强制回流，这会降低我的性能，因为它们太多了。然而 - 它们已经被渲染了，并且我知道它们的大小在它们被渲染的时间和我查询它们的高度的时间之间没有改变。

有没有办法告诉浏览器在查询高度时不要重排？ 此外 - webkit 检查员说：

Layout tree size  5901
Layout scope      Whole document

而且 div 位于绝对定位的祖先中 - 不应该只重排绝对定位的元素吗？

Edit:

所以提供的答案是正确的。事实上，我弄脏了布局，因为我有这个循环：

rows.each(function(){
  $(this).css('height', this.clientHeight);
});

将代码更改为此解决了问题：

var heights = rows.map(function(){
  return this.clientHeight;
});
rows.each(function(){
  $(this).css('height', heights.shift());
});

每当 DOM 更改时，回流就会排队，但仅在以下情况下执行：

1. 没有更多的 JavaScript 需要处理（脚本结束）或

2. 当您查询必须呈现的计算值时，例如clientHeight.

因此，为了避免回流，您必须遵循以下规则

• 更改 DOM 时不要查询 DOM

• 当你想要查询的时候不要改变 DOM

实际上，这意味着您应该在修改 DOM 后将所有查询操作分组到脚本末尾。这样做只会对数千个元素回流一次，而不是对每个元素回流数千次。