1

在 jQuery 中动态创建 HTML 元素时，以下两种方法在性能方面是否存在差异？

// First approach
var elem = $('<div/>').attr('id', 'foo').addClass('myClass');

// Second approach
var elem = $('<div id="foo" class="myClass" />');

此外，一种方法比另一种方法有什么明显的优势，还是只是口味问题？

4

5 回答 5

1

我不认为很多人意识到 jQuery 中最流行和使用最频繁的组件 - 选择器 - 实际上在幕后发生了很多魔法，因此使用了一些资源。您的第一种方法比第二种方法更多地使用选择器。我认为您的第二种方法也更容易阅读并且更清洁。我会坚持那个。
如果您必须修改已经创建的元素，则方法＃1 更适用，但我实际上不会那样创建它。希望这可以帮助。

于 2012-09-26T13:32:13.480 回答
1

做了一个快速测试http://jsfiddle.net/XQv4H/3/并没有出现太大的差异，我的差异可以忽略不计，第一个在大多数运行中都快一点。

我个人发现第一种方式更清洁。更少的字符串解析。而且我发现你在代码中处理的字符串越少，它就越稳定。

并且利用 jQuery 的不同方法将在一定程度上证明您的代码的未来，因为它将能够生成将在任何未来的浏览器中工作的元素，而您的 html 字符串可能并不总是保持兼容。

于 2012-09-26T13:35:29.650 回答
1

问题是关于速度。

“以下两种方法在性能方面有什么区别吗？”

与大多数事情一样，每秒挤出更多操作的可读性消失了。

我更喜欢第二个的可读性，但第一个实际上更快。（在我费心测试的浏览器中）

http://jsperf.com/jquery-dynamic-dom-creation-performance

于 2012-09-26T13:39:52.647 回答
0

除了在其他答案中讨论的速度（第一个稍微快一点），我发现最易读的一个（和我使用的那个）是

var elem = $('<div/>', {
    'id': 'foo',
    'class': 'myClass'
});

但是，如果您的目标是实现最佳性能，则使用.prop()而不是.attr()

var elem = $('<div/>').prop('id', 'foo').addClass('myClass');

http://jsperf.com/jquery-dynamic-dom-creation-performance/2上的比较

于 2012-09-26T13:44:15.483 回答
0

第一种方法更具可读性，但它使用了很多方法链。链接不是邪恶的，但比第二种方法慢。

第一个实际上创建了一个 jquery 对象，然后在其上调用两个（或更多）方法。但是每次都会创建一个新的 $() 对象并将其返回给调用链元素。

第二种方法创建一个新元素（如果参数是正确的 html 字符串），然后……就是这样。没有其他的。非常便宜。

尝试对这两种方法都设置断点，然后一步一步地跟随调试器。

我向你推荐几篇我之前读过的文章：我喜欢它们。

  1. jQuery 性能规则
  2. jQuery 和 JavaScript 编码：示例和最佳实践
于 2012-09-26T14:25:05.313 回答