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

Question

我目前在一次更新大量 dom 元素的属性时遇到性能问题。似乎每次我更改属性时，dom 元素都会重新呈现。无论如何我可以延迟元素的渲染，直到我的所有更新都发生了吗？它在 FF 3 和 3.5 中似乎比 IE 7 和 8 慢很多，这与我的预期相反。

下面是我正在做的一个例子。

var t;

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

问题是“tiles”中的项目数最多可以有 100 个 dom 元素。这才是性能问题真正体现出来的地方。

Answer 1

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

这样只有两个reflows会发生，一个发生在您隐藏 tile 容器时，另一个发生在您完成元素操作并再次显示它时。