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

前端语法/样式/布局 2016-12-31

起步

勉勉强强看过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() {});

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

使用jq提供的工具

$.data()
$.now()
$.extend()
$.isArray()
...

用jq提供的工具功能有保障,而且提高开发效率,不用造轮子。

总结

jq阅读差不多就这样结束吧!2017,加油了!!!


本文由 hongweipeng 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

如果对您有用,您的支持将鼓励我继续创作!