4

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

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

  1. 按字符串：

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

  2. 先创建元素，再添加属性：

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

  3. 创建元素并使用它传递属性对象：

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

编辑： 如果您将很多项目附加到一个元素怎么办？你应该先做一个很长string的然后在循环之后附加它吗？

4

2 回答 2

5

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

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

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

有一个关于 jQuery 的论坛主题，您可能想查看。

更新：

如果您要为一个元素创建很多项目，那么您绝对应该采用字符串方法。看看下面制作 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(''));
于 2012-10-11T08:36:31.473 回答
0

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

  • 避免长系列的字符串连接
  • 让 jquery 的“文本”方法有机会在输出之前清理字符串

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

于 2012-10-11T09:13:47.023 回答