在 jQuery 中动态创建 HTML 元素时，以下两种方法在性能方面是否存在差异？
// First approach
var elem = $('<div/>').attr('id', 'foo').addClass('myClass');
// Second approach
var elem = $('<div id="foo" class="myClass" />');
此外，一种方法比另一种方法有什么明显的优势，还是只是口味问题？
问问题
708 次
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
问题是关于速度。
“以下两种方法在性能方面有什么区别吗？”
与大多数事情一样，每秒挤出更多操作的可读性消失了。
我更喜欢第二个的可读性，但第一个实际上更快。（在我费心测试的浏览器中）
于 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 字符串），然后……就是这样。没有其他的。非常便宜。
尝试对这两种方法都设置断点，然后一步一步地跟随调试器。
我向你推荐几篇我之前读过的文章：我喜欢它们。
于 2012-09-26T14:25:05.313 回答