为什么使用jQuery元素包装会更快？

Question

查看测试：http://jsperf.com/wrap-with-jq

var s = $('<span />').text('my span');



s.wrap('<div id="myWrap" class="myClass"></div>').parent();

每秒8,073个操作

慢了87%

s.wrap($('<div />', {
  'id': 'myWrap',
  'class': 'myClass'
}).parent());

每秒执行72,955个操作

为什么使用jQuery创建新元素会更快？我原本以为它会由于需要使用jQuery包装元素而变慢。

- diplosaurus

---

谢谢你给我提供了 jsPerf 的链接，我之前不知道它存在 :-) - watery

好奇 parent() 是用来做什么的。 - charlietfl

Answer 1

解析那个字符串需要很长时间。通过提供一个包含属性的对象，你可以为它完成大部分工作，从而加快解析速度。

- Niet the Dark Absol

---

啊，我太蠢了。那很有道理。 - diplosaurus

Answer 2

没有检查jQuery和JS引擎的内部，这里只是猜测，但我认为第二个选项只需创建一个单一的div，然后分配几个属性，而第一个选项必须创建一个documentFragment，并分配一些必须解析的HTML。因此，仅创建元素并分配属性比创建片段并给它一些HTML更快。

请注意，这并不总是如此。有时候，将HTML字符串传递给引擎比手动创建许多元素更快，因此，在需要性能优化时，您必须根据测试结果进行测试和优化。

此外，不同的浏览器引擎可能在不同情况下产生不同的结果。

- jfriend00

---

+1. jQuery重复使用单个documentFragment是关键，而不是字符串解析。 - Dave Ward

Answer 3

实际上它们并没有太大的区别。你的测试中有一个错别字...

s.wrap($('<div />', {
  'id': 'myWrap',
  'class': 'myClass'
// move `parent` call outside...
})).parent();

以前的方法是，你创建了一个元素，然后找到它的父元素，结果父元素最终为空数组（[]），然后将其传递给s.wrap，所以用空数组包装s比用dom元素包装s再查找父元素更快。 http://jsperf.com/wrap-with-jq/3 在使用 jq 的情况下，每秒操作数为 5,118 对比原来的 4,149，性能更优。

- Billy Moon