javascript - 避免 HTML 文档回流

Question

我有几百个像这样的“行”元素:

<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 位于绝对定位的祖先中 - 难道不应该只回流绝对定位的元素吗？

编辑:

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

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

将代码更改为此可以解决问题:

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

Answer 1

只要 DOM 发生变化，Reflow 就会排队，但只有在以下任一情况下才会执行:

1. 没有更多的 javascript 要处理(脚本结束)或

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

所以，要避免回流，必须遵守以下规则

• 在更改 DOM 时不要查询它，并且

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

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