避免 HTML 文档重排
Avoiding HTML document reflows
我有几百个这样的"行"元素:
<div class='row'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>
我需要在他们的客户端高度已经呈现在页面上之后。我知道"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());
});
每当 DOM 更改时,Reflow 都会排队,但仅在以下任一情况下执行:
-
没有更多的javascript要处理(脚本结束)或
-
查询必须呈现的计算值(如
clientHeight
.
因此,为避免重排,必须遵循以下规则
-
在更改 DOM 时不要查询它,并且
当您 想要查询 DOM 时,不要更改它
实际上,这意味着在修改完 DOM 后,应在脚本末尾对所有查询操作进行分组。 这样做只会对数千个元素重排一次,而不是对每个元素重排数千次。
clientHeight 属性不会强制重排,至少不会强制重排。您需要两件事来触发回流:
- 弄脏当前布局(设置布局属性,如宽度或高度)
- 查询布局属性(例如客户端高度)
您可以轻松地批量调用来设置宽度或高度,并且在 JS 上下文放弃控制权之前不会发生重排。您可以轻松地批量查询布局属性,如果当前布局不脏,则不会发生重排。
当您连续执行 1 和 2 时,会出现此问题。强制重排是为了使用准确的信息满足您的查询。
据我所知,您是对的,拥有绝对定位的祖先应该限制回流"传播"到整个文档(绝对定位祖先的父级不会回流)。绝对定位老祖体内的所有物品,依旧会回流!
至于解决您的问题,是的。设置缓存机制,如下所示(伪代码):
forEachDiv(function(div) {
div.getClientHeight = function(){
return div.cachedClientHeight = div.cachedClientHeight || div.clientHeight;
}
});
然后,您可以根据需要多次使用div.getClientHeight()
而不是div.clientHeight
,并且只有第一次使用才会触发回流(如果脏)。
显然,根据第一个建议,您还可以人为地查询 clientHeight 以获取一批中的所有div( = 一次重排),之后您就不会再遇到任何问题。
// cache the client height for all divs now, to avoid reflows later
forEachDiv(function(div) {
div.getClientHeight();
});
这是一个有点老的问题,但我在研究这个问题时偶然发现了它,所以我想我会为其他人分享我在研究过程中的发现。
有一个非常好的库可以帮助您避免强制重排,尤其是在较大的应用程序上:https://github.com/wilsonpage/fastdom。
库的想法是将读取和写入分组到不同的阶段。
- 从Javascript和Php变量创建Html模板文档
- 有没有一种方法可以在没有文档或jQuery的情况下使用javascript解码html实体
- HTML文档中脚本标记的位置-<头部>&<身体>有不同的行为
- 如何从多个不同的html页面获得mongodb文档的用户输入
- 暂停文档-HTML、CSS、JavaScript
- 如何用javascript重写html文档
- 是否可以使用有角度的HTML文档进行$编译
- 从现有html自动生成html源文档
- 枚举附加到文档的HTML对象的所有事件
- 如何确保通过电子邮件发送的html文档中的Google Drive链接不会被识别为附件
- 将jQuery.js文件附加到html文档中
- 谷歌文档如何拦截Ctrl-S/Command-S来保存文档而不是html页面
- 为任意html文档创建不引人注目的覆盖
- 在HTML文档中使用XML文件中的数据
- 删除“;NaN”;来自HTML文档
- <!文档html>在JS脚本中触发“use strict”
- 在Google Apps Script中获取javascript“文档HTML DOM”信息
- 在使用 Chrome 扩展程序加载之前,使用 document_start 修改文档 html
- 在html中嵌入文档(html/pdf/swf/…)的统一方法
- 文档Html,它是真正的文档在javascript