Question

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



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

8,073 ops / sec

慢87％

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

72,955 ops / sec

有没有理由用jQuery创建一个新元素这么快？由于必须用jQuery包装一个元素，我原以为它会慢一些。

Answer 1

解析该字符串需要很长时间。通过赋予它一个充满属性的对象，你正在为它完成大部分工作，从而导致更快的时间。

Answer 2

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

请注意，情况并非总是如此。肯定有时候给引擎提供一串HTML比手动创建大量元素要快，所以当需要进行性能优化时，你必须根据测试结果进行测试和优化。

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

Answer 3

实际上并没有太大的不同。你的测试中有一个错字......

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

就是这样，你创建了一个元素，然后找到了它的父元素，最后是一个空数组（[]）然后传递给s.wrap，所以它使用空数组包装s比使用dom元素包装更快，然后找到父数据。

5,118 vs 4,149 ops / sec赞成使用jq