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

查看测试：

var s=$（''）.text（'my span'）；
s、 包装（“”）.parent（）；

8073次/秒

慢87%

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

s.wrap（$（''）{
'id'：'myWrap'，
“类”：“myClass”
}).parent（））；

72955次/秒

---

使用jQuery创建新元素的速度如此之快，有什么原因吗？我本以为它会因为必须用jQuery包装元素而变慢。

解析该字符串需要很长时间。通过为它提供一个充满属性的对象，您就完成了它的大部分工作，从而加快了速度。

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

注意，情况并非总是如此。在某些情况下，给引擎一个HTML字符串肯定比手动创建大量元素要快，因此当需要性能优化时，您必须根据测试结果进行测试和优化

---

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

实际上没有太大的不同。你的测试中有一个输入错误

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

s.wrap（$（''）{
'id'：'myWrap'，
“类”：“myClass”
//将'parent'呼叫移到外部。。。
})).parent（）；

按照原来的方式，您创建了一个元素，然后找到它的父元素，它最终成为一个空数组（

[]

），然后传递给

s.wrap

），因此使用空数组包装s要比使用dom元素包装s然后找到父元素更快

---

5118对4149次/秒支持jq

Ahhh，我很傻。这是有道理的。感谢链接到jsPerf，我不知道：-）好奇

parent（）

对于+1是什么。jQuery重用单个documentFragment是关键，而不是字符串解析。

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