jQuery源码分析(二十四): 总结与优化建议

起步

勉勉强强看过jq,还是有很多地方不能理解,有些也是借着其他人理解的文章去理解的。第一次阅读确实挺痛苦的,看到后面又忘记前面。

总之,在写jq的时候也有一些性能优化的技巧。

优化建议

jq对象

每次调用 $()
的时候都会重新 new
一个jq对象,所以尽量将常用到的jq对象用变量存储。

选择器的优化

快的选择器是ID选择器,jq直接通过 getElementById()
获取而不用遍历dom树。所以能通过id查找的都用id。

$("div #id") ---> $('#id')

如果你要的元素是在某个范围内的,最好指定其上下文:

$('li')     ----> $('#id').find('li') 或者 $('li', $('#id')) 或者 $('li', '#id')

由于渲染规则从右到左的策略,选择器不是越长越好:

$('.contact-links div.side-wrapper') //效率极慢

选择第二块的是标签选择,所以最好总是用tag来修饰class:

$('.input') ---> $('input.input')

$名称冲突

如果jq和其他框架在 $
名称上冲突,可以用立即调用函数进行包裹:

(function($){
    //这里的$都是jq的

})(jQuery);

最小的dom操作

dom操作太耗性能:

for(var i = 0; i < 100; i++){
    elem.append('<li>element '+i+'</li>');
}
//改为
var str = '';
for(var i = 0; i < 100; i++){
    str += '<li>element '+i+'</li>';
}
elem.append(str);

我们希望在插入DOM结构之前先在一个字符串里创建一套元素。样式操作整合起来一样有效:

ele.css('border', '3px dashed yellow')
    .css('background-color', 'orange')
    .css('width', '300px');

//改为
ele.css({
    'border': '3px dashed yellow',
    'background-color': 'orange'
    'width': '300px'
});

全局ajax监听

$(document).ajaxStart(funciton() {});
$(document).ajaxStop(funciton() {});

这种很试用在需要弹出一层静态框等待数据

原文 

http://www.hongweipeng.com/index.php/archives/1081/

PS:如果您想和业内技术大牛交流的话,请加qq群(527933790)或者关注微信公众 号(AskHarries),谢谢!

转载请注明原文出处:Harries Blog™ » jQuery源码分析(二十四): 总结与优化建议

赞 (0)

分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址