使用jquery创建或删除几十个div时,如何优化性能?

创建DOM元素非常昂贵。尽量避免。也就是说,新发布的jquery 1.4明显提高了性能,但如果可以的话还是要避免。

从 jQuery 1.4 Released :

jQuery(“<div>”) jQuery(“<div/>”) 和 jQuery(“<div></div>”) ( jQuery() Documentation , Commit )

所有三个现在都使用相同的代码路径 (使用document.createElement) 提高性能 jQuery("<div></div>") . 注意如果 您指定属性,我们使用 浏览器的本机分析(使用 内螺纹)。

是的,重用要好得多。

一个技巧——如果您要向DOM追加一组项目,那么可以将它们构建为一个字符串,然后一次追加所有项目。

下面是关于这个主题的一个很好的链接:

http://www.artzstudio.com/2009/04/jquery-performance-rules/#limit-dom-manipulation

在最近的jquery项目中,我有500个 IMG -标签位置为 style -标签和绝对位置。结果发现,删除它们并用新坐标重新创建它们比修改 风格 -使用jquery css函数标记。(更换整个系统可能会更快 风格 -标签,但在这种情况下这是不可能的。)

我还测量了用所有的 即时消息 -标记和添加到一个附加中比逐个添加(浏览器不需要重新绘制?)要快。

在您的情况下,应该可以很容易地测量两种不同的方法:

var start = new Date().getTime();

// Do the update here

var end = new Date().getTime();
$('#redraw').html(end - start);

在HTML中添加占位符:

Redraw: <span id="redraw"></span>ms