更改属性时延迟dom元素的渲染 [英] Delay rendering of dom element when changing properties

问题描述

我目前在一次更新许多dom元素的属性时遇到性能问题.似乎每次我更改属性时，dom元素都会重新渲染.无论如何，我可以延迟元素的渲染，直到所有更新都完成了吗?在FF 3和AMP 3中，它似乎要慢得多.3.5比IE 7&8违反了我的预期.

I've currently run into a performance problem when updating properties on lots of dom elements at once. It seems that each time I change a property the dom element gets re-rendered. Is there anyway I can delay the rendering of the elements until all of my updates have taken place? It seems to be a lot slower in FF 3 & 3.5 than IE 7 & 8 which goes against what i expected.

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

An example of what i'm doing is below.

var t;

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

问题在于平铺"中的项目数最多可以包含100个dom元素.真正表现出性能问题的地方.

The issue is that the number of items in "tiles" can be up to 100 dom elements. Which is where the performance issues really show through.

推荐答案

同意

Agree with @Crimson but I think that it will be better to hide the parent of all the elements that you're updating and if they don't have an exclusive parent, try to create one.

通过这种方式，只会发生两次回流，一种是隐藏 tile 容器，另一种是在完成元素操作并再次显示时.

In that way only two reflows will occur, one when you hide the tile container, and other when you finish the element manipulation and you show it again.

这篇关于更改属性时延迟dom元素的渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！