javascript - 使用 JQuery 创建或删除数十个 div 时如何优化性能？

Question

背景: 在我目前正在进行的项目中，我创建了一个 jquery 插件，它创建了一个可拖动的“google-maps”式 map ，由许多图 block 组成。类似于谷歌地图的工作方式，但此时没有缩放。

这个 map 插件创建和销毁 10-20 <div>使用 jQuery 的 $('..').append 将每个鼠标拖动一个瓷砖长度的瓷砖，而且性能还不错。但我希望性能更好，以便使用资源较少的计算机的人更容易访问该应用程序。

问题:

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

重用生成的性能更好 <div>元素，通过修改您要删除的现有元素，而不是从头开始创建它们？

正在使用生成的 $('<div>') 创建元素比在已经存在的元素上选择和更改类和子元素更慢还是更快？

Answer 1

创建 DOM 元素非常昂贵。尽量避免它。话虽这么说，新发布的 jQuery 1.4 显然提高了性能，但如果可以的话仍然避免使用它。

来自 jQuery 1.4 Released :

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

All three now use the same code path (using document.createElement), improving performance for jQuery("<div></div>"). Note that if you specify attributes, we use the browser’s native parsing (using innerHTML).

是的，重用要好得多。