首页 > 代码库 > 在看 jquery 源码中发现的一些优化方向

在看 jquery 源码中发现的一些优化方向

1. 避免使用 $.fn.each 或 $.each

因为它比原生的 for/while 真的会慢一些,循环次数越多差距越大。

另外,对象的 for-in 比 for 是要快一丢丢的,但数组的 for-in 要比 for 慢

 

2. 选择器

始终要相信,原生的普遍要快一些,因此 jquery 也是如此,

id 选择器 $(‘#id‘) / 元素标签选择器 $(‘input‘) / 类选择器 $(‘.class‘) 都是原生的

而伪类选择器 $(‘:hidden‘) / 属性选择器 $(‘[data-id]‘) 就相对更慢一些了

你猜用了 querySelector 或 querySelectorAll 后后两者会快些吗,自己快去试试吧

 

3. 父子关系

比较以下这 6 种获取子级元素的方法,发现 $parent.find(‘.child‘) 竟然最快

$(‘.child‘, $parent) 

其实还是会转化为 $parent.find(‘.child‘) 去寻找,所以何必呢

$parent.find(‘.child‘)

最原生的选择器去查找 .child,当然最快

$parent.children(‘.child‘)

其实内部会使用 siblings 和 nextSiblings 一个个区遍历节点,不管怎样都比 find 要慢

$(‘#parent > .child‘)

jQuery 的 Sizzle 引擎是从右向左识别的,这是致命的(虽然浏览器也是这样合并 DOM 树和样式树的,但那是无奈之举呀)

$(‘#parent .child‘)

与上同理,还要考虑多层级,速度就更慢了

 

4. 做好缓存

每个 jQuery 对象的开销其实不小,每次选择都会生成一个 jQuery 对象,而它又都有上百个属性,想想都可怕。因此:

var $obj = $(‘#xx‘);
$obj.find(‘.a‘);
$obj.find(‘.b‘)

$(‘#xx‘).find(‘.a‘);
$(‘#xx‘).find(‘.b‘);

可能快上一倍

 

5. dom 元素操作可用原生就用原生吧

$(‘#x‘).on(‘click‘, function(){
    alert($(this).prop(‘id‘));
    alert(this.id);
}); 

两者相比,后者要快上许多许多。

同理:

$(this).hide(0);
this.style.display = ‘none‘;

  

6. 使用链式写法

$(‘xx‘).find(‘p‘).eq(2).text(‘哈‘);

想想其实也应该懂的,免去了重复生成 jQuery 对象的开销

 

7. 改动 DOM 结构

众所周知,改动 DOM 结构的开销何其大,拉开十倍的速率差距都是可能的。

对大量 DOM 的插入还是使用先合并再插入比较好。而是使用 jQuery 元素的合并还是字符串的合并就得看安全要求和复杂程度了

对大量 DOM 的修改建议先用 detach 方法把元素取出,处理完毕后再插回文档

 

8. 存储数据

$(‘#xx‘).data(key, value);
$.data($(‘#xx‘), key, value);

前者定义在元素对象的 prototype 上,后者定义在全局 $ 对象上(都是实例对象为什么这样会快其实我也没搞懂,还只想到这点,请大佬补充)

 

9. 事件委托

原生去写事件委托还是比较累的,所以使用 jQuery 很大程度上是因为 $.fn.on 和 $.ajax 是我的最爱

$(‘#parent‘).on(‘click‘, ‘.child‘, function(){});

相比去给每个 .child 都绑定 click 在元素超多时那是很烧的一件事

在看 jquery 源码中发现的一些优化方向