html代码重排,javascript – 避免HTML文档重排

clientHeight属性不强制重排,至少不是自己.你需要两件事来触发回流：

>脏当前布局(设置宽度或高度等布局属性)

>查询布局属性(例如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();

});