为什么使用jQuery元素包装元素要快得多?

Why is wrapping elements so much quicker with jQuery elements

本文关键字：元素 快得多 包装 为什么 jQuery      更新时间：2023-09-26

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

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

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

8073年运维/秒

慢的

87%

s.wrap($('<div />', {
  'id': 'myWrap',
  'class': '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，所以用空数组包装s比用dom元素包装它更快，然后找到父元素。

http://jsperf.com/wrap-with-jq/3

5118 vs 4149 ops/SEC，支持jq

相关文章：