开发者社区> 夕阳白雪> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

编写高性能的jQuery代码

简介: jQuery Optimization 现在jQuery已经出现在很多项目中,然而许多同学忽略了他的性能问题以及代码质量问题, 下面是我对jQuery的一些性能方面的学习. 选择器 选择器是jQuery中的核心功能,选择同一个DOM元素我们可以使用不同的方法。
+关注继续查看

jQuery Optimization

现在jQuery已经出现在很多项目中,然而许多同学忽略了他的性能问题以及代码质量问题,
下面是我对jQuery的一些性能方面的学习.

选择器

选择器是jQuery中的核心功能,选择同一个DOM元素我们可以使用不同的方法。但是哪一种是最快的呢?

  1. if possible, please use more id selector. id selector is used javascript method getElementById
    //bad
    $('#id selector')
    //good
    $('#id')

    caution: don't use tag to decorate id selector

  2. Before using class selector, you'd better add tag. that's is used javascript method getElementsByTagName
    //bad
    $('.class')
    //good
    $('tag.class')

    caution: class selector is the slower selector, use less

  3. if possible, right more detail
    //bad
    $('tag.class .class')
    //good
    $('.class tag.class')

  4. when you select children, you'd better use find. the best way that cache the parent.
    var parent = $('#parent');
    var children = parent.find('children');

  5. 最慢选择器:伪类选择器和属性选择器,新的浏览器增加了querySelector()和querySelectorAll()方法,可能会使这两类选择器性能提升

  6. 从父元素选择子元素

    • $('child', \(parent) 这种选择其实会执行\)parent.find('child'),排名第二
    • $('child', \(('parent')) 这种选择会别转成\)('parent').find('child'),排名第三
    • $('#parent child')
      这种选择适合选择多级子元素,排名第六
    • $('#parent > child')
      这种选择和上面的相同,排名第五
    • \(parent.children('child') 这种选择会被转换成\).sibling(),排名第四
    • $parent.find('child')
      这种选择会被转成getElementById,getElementByName,getElementByTagName等javascript原生语法,所以速度最快,排名第一
    总结:ID选择器是最快的选择器,建议多用。然后是标签选择器,其次是class选择器   

函数

  1. 使用jQuery的内部函数data()来存储状态

  2. 尽量使用on方法来绑定事件,因为任何绑定方法都是最终使用on来实现的

代码质量

  1. 不要在循环中直接操作 DOM:
    // 性能差
    $.each(myArray, function(i, item) {
    var newListItem = '

  2. '+item+'';
    $('#contain').append(newListItem);
    });
    // 性能好
    var html = '';
    $.each(myArray, function(i, item) {
    html += '
  3. ' + item + '';
    });
    $('#contain').html(myHtml);
  4. 对数组循环时,缓存数组长度
    for(var i = 0, len = array.length; i < len; i++) {

    }           
  5. 尽量少使用匿名函数,最好使用类封装
    var mo = {
    init: function() {

        }        
    };           
  6. 缓存变量,DOM遍历最消耗性能,所以尽量将重用的元素缓存
    height = $('#element').height();
    $('#element').css('height', height);
    // 好的做法
    $element = $('#element');
    height = $element.height();
    $element.css('height', height);

  7. 尽量少使用全局变量
    $ele = $('#element');
    // 最好使用var
    var $ele = $('#element');

  8. 简单的语句可以使用原生的javascript,因为jQuery最终执行的也是原生的

  9. 使用链式写法,因为使用链式写法jQuery自动缓存每一步的结果,因此比非链式写法要快

  10. 尽量少使用$.each进行循环,使用原生javascript的for和while来进行

  11. jQuery大部分方法都有两种,例如:\(().each与\).each

    $().each是基于jQuery对象的,jQuery对象会占用很多资源,因为他包含很多属性和方法        
    $.each是基于jQuery方法的,不会占用太多资源,所以尽量使用这种方式   

10.尽量使用\(.ajax,少使用\).get(),\(.getJSON(),\).post(),因为他们最终也是用的$.ajax()

减少代码嵌套:

减少代码嵌套,对于阅读和维护代码来时都是有益的,通过deffer我们可以减少代码的嵌套

      ***第一种:***        
        var request = function() {        
            var defer = $.Deferred();        
            $.ajax({url:'data/test.json'})        
            .done(function(data){        
                defer.resolve(data);        
            });        
            return defer;        
        };     

        $.when(request())
        .then(function(data) {
            console.log(data);
        });        

      ***第二种:***        
        var request = function() {        
            return $.ajax({url:'data/test.json'});        
        };

        $.when(request())
        .then(function(data) {
            console.log(data);
        });        

      ***第三种:***        
        $.when($.ajax(url:'data/test.json'))
        .then(function(data) {
            console.log(data);
        });        

建议多阅读几遍jQuery源码,只有知道其中的实现原理才能更好的使用它

jQuery Source

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
编写高性能的jQuery代码
编写高性能的jQuery代码
0 0
编写更好的jQuery代码
讨论jQuery和Javascript性能的文章有很多。不过在这里我还是要总结一下jQuery的提速策略,还有我自己的一些建议,希望这些建议能帮助你写出更好的jQuery和JavaScript代码。更好的代码意味着更快的应用和无垃圾的网站。更快的渲染和响应意味着更好的用户体验。
0 0
(转载)编写高效的jQuery代码
原文地址:http://www.cnblogs.com/ppforever/p/4084232.html 最近写了很多的js,虽然效果都实现了,但是总感觉自己写的js在性能上还能有很大的提升。本文我计划总结一些网上找的和我本人的一些建议,来提升你的jQuery和javascript代码。
582 0
编写更好的Jquery代码
本文转载:http://www.cnblogs.com/allenxing/p/3672105.html               http://www.cnblogs.com/allenxing/p/3672552.html
323 0
jQuery插件实现图片墙小案例
jQuery插件实现图片墙小案例
0 0
【jquery Ajax】接口的学习与Postcode插件的使用
【jquery Ajax】接口的学习与Postcode插件的使用
0 0
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
0 0
利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
0 0
NET MVC第七章、jQuery插件验证
NET MVC第七章、jQuery插件验证
0 0
编写自定义的JQuery插件的几个注意点
编写自定义的JQuery插件的几个注意点
0 0
+关注
夕阳白雪
前端开发工程师
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JavaScript异步编程
立即下载
编程语言如何演化—— 以 JS 的 private 为例
立即下载
编程语言如何演化-以JS的private为例
立即下载