转载

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/

正文到此结束

所属分类：编程技术

本文标签： jquery 快的 find DOM tar Document id 遍历希望 ip App IO PHP CSS 文章 IDE http 数据 Ajax
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二