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() {});
这种很试用在需要弹出一层静态框等待数据。
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
