Question

当我一次更新许多dom元素的属性时，我遇到了性能问题。似乎每次我更改属性时都会重新呈现dom元素。无论如何，我可以延迟元素的渲染，直到我的所有更新都发生了？在FF 3＆amp; 3.5比IE 7＆amp; 8这违背了我的预期。

我正在做的一个例子如下。

var t;

for (var i = 0; i < tiles.length; i++) {
    t = tiles[i];
    t.width = '100';
    t.height = '100';
}

问题是“图块”中的项目数量最多可达100个dom元素。这是性能问题真正表现出来的地方。

Answer 1

同意@Crimson但我认为最好隐藏您正在更新的所有元素的父级，如果他们没有独占父级，请尝试创建一个。

这样只会出现两个reflows，一个是隐藏 tile 容器时，另一个是当你完成元素操作并再次显示它时。

Answer 2

要避免闪存，您可以使用自身的克隆替换父级，然后处理文档外部的原始父级。然后，当你完成后，你可以用原始的替换克隆：

var parent = /* define parent here */;
var clone = parent.cloneNode(true);

parent.parentNode.replaceChild(clone, parent);

/* Do stuff with parent and its childNodes... */

clone.parentNode.replaceChild(parent, clone);

Answer 3

在进行更改和显示之前，为每个图块声明display：none：在完成所有更改后阻止。

Answer 4

在FF 3＆amp; 3.5比IE 7＆amp; 8这违背了我的预期。

目前，FF会在房产更改时立即重新计算布局。 IE等待它必须重绘页面，或者您访问需要知道新布局的offsetWidth属性。这并不总是用于正常工作。

CMS的方法很好。如果您的所有图块都与示例中的图块大小相同，则可以采用更快的方式（如果图块没有公共父图块，也可以使用）。只需给它们一个类，然后使用CSS立即切换它们：

body.tiles100 .tile { width: 100px; height: 100px; }

document.body.className= 'tiles100';

如果您事先不知道预定义的可能尺寸选择，则必须通过document.styleSheets列表动态编写样式表规则。但是，这有点痛苦，因为IE中的脚本接口与其他浏览器使用的DOM标准不完全匹配。试。

更改属性时延迟渲染dom元素

4 个答案: