Javascript 使用JQuery创建或删除几十个div时，如何优化性能？

背景： 在我正在进行的当前项目中，我创建了一个jquery插件，该插件创建了一个可拖动的“谷歌地图”（GoogleMaps）样式的地图，由许多分幅组成。与谷歌地图的工作原理类似，但此时没有缩放功能

此地图插件使用jQuery的

$（'..'）将每个鼠标拖动一个平铺长度，创建和销毁10-20个
平铺。append

，并且它具有良好的性能。但我希望performance性能更好，以便使用资源更少的计算机的人更容易访问该应用程序

问题：

如何使用jQuery创建和销毁大量div以最大限度地提高性能

通过修改要删除的现有元素，而不是从头开始创建它们，重用生成的

元素对性能更好吗

---

使用生成的

$（“”）创建元素比选择和更改已经存在的元素上的类和子元素慢还是快？
创建DOM元素的成本很高。尽量避免。尽管如此，新发布的jQuery1.4显然提高了性能，但如果可以的话，仍然可以避免

发件人：

jQuery（“”
jQuery（“”
和
jQuery（“”（，）

所有三个现在使用相同的代码路径
（使用document.createElement），
提高绩效
jQuery（“”）
。注意，如果
您指定属性，我们使用
浏览器的本机解析（使用
innerHTML）

是的，重复使用要好得多。
一个技巧-如果要将一组项附加到DOM中，请尽可能将它们构建为字符串，然后一次附加所有项

以下是一个关于该主题的好链接：

在最近的一个JQuery项目中，我有500个
IMG
-标记，它们用
样式和绝对位置定位。事实证明，删除它们并用新坐标重新创建它们要比使用jquerycss函数修改
样式
-标记快得多。（替换整个
样式
-tag可能会更快，但在本例中这是不可能的。）

我还测量到，用所有
IMG
-标记构建一个字符串并将它们添加到一个append中要比逐个添加它们快（大约10-15%）（浏览器不必重新绘制？）

在您的情况下，应该很容易测量两种不同的方法：

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

重画：ms
我相信你，因为这听起来合乎逻辑，但我想知道你是否有关于这个主题的链接？谢谢我在我的答案中添加了一个不错的链接，我切换到了一个div-tile重用系统，也切换到了jquery1.4，现在一切都如风了。谢谢你的提示。@ScottE：萤火虫档案收集了很多其他的东西。我仍然打开了显式测量，看看我是否弄乱了重画的速度。