代码之家 › 专栏 › 技术社区 › Alex

更改属性时延迟dom元素的呈现

performance javascript

Alex · 技术社区 · 16 年前

var t;

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

4 回复 | 直到 16 年前

Community Mohan Dere 8 年前

同意 @Crimson

reflows 将发生,其中一个是在隐藏瓦片

James 16 年前

为了避免闪存,您可以将父级替换为其自身的克隆,然后在文档外部处理原始父级。然后,完成后,您可以将克隆替换为原始:

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);

KJ Saxena 16 年前

bobince 16 年前

在FF 3&中,速度似乎慢得多;3.5比IE 7&这与我的预期背道而驰。

当前,FF会在特性更改时立即重新计算布局。IE会一直等待,直到它必须重新绘制页面,或者您访问需要了解新布局的offsetWidth等属性。这并不总是能正常工作。

CMS的方法很好。如果您的所有分幅都与示例中的大小相同,则有一种更快的方法(如果分幅没有公共父级,也可以使用这种方法)。只需给它们一个类,并使用CSS一次性切换它们:

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

document.body.className= 'tiles100';

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

推荐文章

Sweepy Dodo · JSON lite的格式化

1 年前

Merlin Nestler · 为什么索引中的列顺序在这种情况下会产生如此大的影响?

1 年前

giantjenga · 优化整数向量到二进制向量的转换

1 年前

Adriaantje · Powershell版本的cut-d在处理大文件时速度很慢,我是否错过了快速的方法?

1 年前

Costinean Sebastian · 如何优化使用for循环处理大型数组的MATLAB脚本的执行时间?"

1 年前

Zegarek · Postgresql递归查询未提供预期结果

1 年前

Joe · 为什么这两个查询之间的性能存在如此大的差异?

1 年前

tic-toc-choc · 在`dplyr中高效使用列表进行过滤`

1 年前

Mohan · 是否有一种更快的方法来编写代码,从1:N中提取许多随机样本?

1 年前

user2980746 · 在C#字典中键入xyz对的最有效方法是什么?

1 年前