jQuery - 为什么通过字符串创建类对象 ($('>')) 比创建相同对象并执行 addClass() 方法慢？

Question

谁能解释一下为什么通过字符串创建对象比在 jQuery 中创建同一对象并执行 addClass() 方法慢？

我以为 addClass() 方法会慢一些，但事实并非如此。我想知道为什么？

看看这个 jsPerf - http://jsperf.com/jquery-append-with-class -and-with-method-addclass

Answer 1

这是因为仅传递元素名称（例如 $("

")）会映射到对 document.createElement()。

另一方面，传递元素及其属性，例如 $("

")，映射到对 document.createDocumentFragment()，它比 createElement() 慢，然后写入className 属性。

Answer 2

我想说 $('

') 需要时间，因为它必须解析 HTML 字符串，然后执行 addClass() （或内部等效项）无论如何。

Answer 3

我尝试添加第三个测试用例

viaObject = $("<div>", { class: "foo-"+counterN });
biz.append(viaObject);
counterN++;

，我认为它应该与 $("

").addClass("foo-") 一样快，原因由 Frédéric Hamidi 指出（ document.createElement() 与 document.createDocumentFragment()) 但它仍然较慢。

addClass() 可能比访问对象的属性更快。

无论如何，这证明您应该像这样

 $("<div>", { class: "foo-"+counterN }); 

而不是这样创建元素：

 $('<div class="foo-' + counterS + '" />');