在使用JQuery创建或删除数十个div时，如何优化性能？
后台：在我正在进行的当前项目中，我创建了一个jquery插件，它创建了一个可拖式的‘google’-esque地图，由许多块组成。类似于谷歌地图的工作方式，但此时没有缩放。
这个地图插件创建并破坏了使用jQuery的<div>的$('..').append每个鼠标拖动10-20块块，并且它具有良好的性能。但我希望表现得更好，以便使资源较少的计算机用户更容易访问该应用程序。
问题：
我能做些什么来最大限度地提高性能，使用jQuery创建和销毁大量的div？
通过修改要删除的现有元素来重用生成的<div>元素，比从头创建它们更有利于性能吗？
使用生成的$('<div>')创建元素比选择和更改已经存在的元素上的类和子元素要慢还是快？
回答 3
Stack Overflow用户
发布于 2010-01-14 18:37:15
创建DOM元素非常昂贵。尽量避免。尽管如此，新发布的jQuery 1.4显然提高了性能，但如果可以的话，仍然可以避免它。
jQuery(“<div>”)jQuery(“<div/>”)和jQuery(“<div></div>”)(jQuery()文档，提交) 这三种方法现在都使用相同的代码路径(使用document.createElement)，从而提高了jQuery("<div></div>")的性能。注意，如果指定属性，则使用浏览器的本机解析(使用innerHTML)。
是的，再利用要好得多。
Stack Overflow用户
发布于 2010-01-14 18:38:56
提示之一--如果您要在DOM中追加一组项，请将它们构建为字符串(如果可能的话)，并同时追加所有项。
下面是关于这个主题的一个很好的链接：
http://www.artzstudio.com/2009/04/jquery-performance-rules/#limit-dom-manipulation
Stack Overflow用户
发布于 2010-01-15 10:34:16
在最近的一个JQuery项目中，我将500个IMG-tags定位在style-tag和绝对位置上。结果表明，删除它们并使用新的坐标重新创建它们要比用stylecss-函数修改JQuery -tag要快得多。(替换整个style-tag可能会更快，但在这种情况下是不可能的。)
我还测量到，使用所有IMG-tags构建字符串并将它们添加到一个附加中比一个接一个地添加字符串要快(大约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>mshttps://stackoverflow.com/questions/2069080
复制
腾讯云开发者
