jQuery中创建DOM元素的区别答案

【问题标题】：Difference between creation of DOM elements in jQueryjQuery中创建DOM元素的区别
【发布时间】：2012-10-11 08:27:41
【问题描述】：

我想知道在使用 jQuery 创建 DOM 元素时是否存在性能差异（或最佳实践是什么）。

据我所知，有 3 种方法可以做到这一点：

按字符串：

$('<a href="http://www.example.com" class="footerLink" rel="external">example</a>');`

先创建元素，后添加属性：

$('<a></a>')
  .addClass('footerLink')
  .attr({ 
     rel: 'external, 
     href: 'http://www.example.com' 
  })
  .text('example');

创建元素并传递属性对象：

$('<a></a>', {
  'class': 'footerLink', 
  href: 'http://www.example.com',
  rel: 'external'
})
.text('example');

编辑： 如果您要向一个元素附加很多项目怎么办？您是否应该先创建一个很长的 string 并在循环之后附加它？

【问题讨论】：

你在 2 和 3 中缺少.text("example")。那旁白你为什么不访问jsperf.com，亲自看看呢？
检查这个：jsperf.com/jquery-add-element - 看起来最快的方法是第一个..

标签： jquery performance dom

【解决方案1】：

创建您想要作为字符串附加的整个 DOM，然后将其作为 html() 附加到文档的最快方法：

var dom = '<a href="http://www.example.com" class="footerLink" rel="external">example</a>';
$(element).html(dom);

在示例中的三个中，最快的应该是第三个，因为它不必进行任何复杂的字符串解析，并且属性不是使用链式函数调用放置的，而是作为单个提供的对象作为选择器的参数。

There is a forum thread on jQuery you may want to check out.

更新：

如果您要为一个元素创建大量项目，那么您绝对应该采用字符串方法。看看下面制作 1000 个列表元素的例子。

// Assume we have data defined with 1000 data members
// each containing a text property
var list = [];
for (var i = 0; i < data.length; i++) {
    list.push('<li>' + data.text + '</li>');
}
$(ul).html(list.join(''));

【讨论】：

感谢分享文章！所以通过传递一个字符串来改变innerHtml来创建DOM元素具有最好的性能。但是我不喜欢标记，它使代码的可读性降低。你怎么看？
@WillemdeWit 是的，那是正确的。可读性较差，但性能更好。
也许我应该深入研究一个模板插件，比如 jQuery tmpl。也许我可以同时拥有性能和漂亮的标记。
@WillemdeWit 模板插件实际上大大降低了渲染性能。尤其是 jQuery 模板在大型数据集上表现不佳。我们所做的测试显示，10000 条数据记录的平均渲染时间为 5.6 秒，每条记录 4 个属性。

【解决方案2】：

正如 Konstantin 所解释的，字符串方法在性能方面更好。然而，我想指出，如果在编写代码时 DOM 字符串是未知的（例如，文本来自用户输入），那么较慢的方法将是有意义的：

避免长系列的字符串连接
让 jquery 的 "text" 方法有机会在输出前清理字符串

最后，这可能真的是模板框架的工作（小胡子或其他......）

【讨论】：