jQuery性能优化

Posted 2020-06-23 DodoMonster

一、jQuery性能优化

（1）使用最新版本的jQuery类库

jQuery每一个新的版本都会较上一版进行Bug修复和一些优化，同时也会包含一些创新，所以建议使用最新版本的jQuery来提高性能。不过需要注意的是，在更换版本后，要记得测试你的代码，毕竟有时候不是完全向后兼容。

（2）使用合适的选择器

①$(“#id”)

使用id来定位DOM元素无疑是最佳提高性能的方式，因为jQuery底层将直接调用本地方法document.getElementById()。如果这个方式不能直接找到你需要的元素，可以考虑使用find()方法，代码如下：

$(“#id”).find(“element”);

②$(“p”),$(“div”),$(“input”)

标签选择器的性能也是不错的，它是性能优化的第二选择，因为jQuery将直接调用本地方法document.getElementByTagName()来定位DOM元素。

③$(“.class”)

类选择器对于比较欣的浏览器如IE9，它支持本地方法document.getElementByClassName()，而对于老的浏览器，如IE8或者更早版本，只能靠使用DOM搜索方式来实现，这无疑对性能产生较大的影响。所以建议有选择性地使用它。

④$(“[attribute=value]”)

对于利用属性来定位DOM元素，本地javascript方法中并没有直接地实现，大多都是使用DOM搜索方式来达到效果，很多现代浏览器都支持querySelectorAll（）方法，但是不同浏览器间的性能还是有区别，总体来说，使用这种方式来定位DOM元素，性能并不是非常理想。所以为了获得更好的优化效果，建议开发中尽量避免使用这种对性能有害的方式

⑤$(“:hidden”)

和上面利用属性来定位DOM的方式类似，这种伪选择器也同样没有直接在本地javascript方法中实现，并且jQuery需要搜索每一个元素来定位这个选择器，这将对应用带来比较大的性能问题，所以建议尽量不要使用。如果坚持要使用这种方式，请先使用ID选择器定位父元素，然后再使用该选择器，这样对性能会有帮助，如：

$(“#comment”).find(“:hidden”)

$(“#username”).find(“checkbox”)

以上是使用选择器的基本规则，性能自上而下依次下降。另外可以使用jsPerf来直观查看性能区别，地址：http://jsperf.com/id-vs-class-vs-tag-selectors/2

总结注意：1、尽量使用ID选择器

             2、尽量给选择器指定上下文

（3）缓存对象

在开发代码中，可能会经常这么写：

$(“#traffic_light input.on”).bind(“click”,function(){…});

$(“#traffic_light input.on”).css(“border”,”1px solid red”);

$(“#traffic_light input.on”).css(“background-color”,”red”);

$(“#traffic_light input.on”).fadeIn(“slow”);

编程中的跳跃思维导致你有可能这样书写代码，这无可厚非，但是这样导致的结果是：jQuery会在创建每一个选择器的过程中，查找DOM，创建多个jQuery对象。比较好的书写方式如下：

var $active_light=$(“#traffic_light input.on”);

$active_light.bind(“click”,function(){…});

$active_light.css(“border”,”1px solid red”);

$active_light.css(“background-color”,”red”);

$active_light.fadeIn(“slow”);

然而，在本例中使用链式方式将更加简洁，但是这里职位说明使用缓存变量的重要性，这和java开发中不要随意的创建对象一样，可以帮助有效地提高代码运行性能。

使用jQuery链式操作再加以改善后：

var $active_light=$(“#traffic_light input.on”);

$active_light.bind(“click”,function(){…}).css({“border”:”1px solid red,"background-color”:”red”}).fadeIn(“slow”);

如果想在其他函数中使用jQuery对象，可把它们缓存到全局环境中：

$(function() {
    //在全局范围定义一个对象
    window.$my = {
        head: $("head"),
        traffic_light: $("#traffic_light"),
        traffic_button: $("#traffic_button")
    };

    function do_something() {
        //现在可以引用存储的结果并操作它们
        var script = document.createElement("script");
        $my.head.apped(script);
        //当在函数内部操作时，可以继续将查询存入全局对象中
        $my.cool_results = $("#some_ul li");
        $my.other_results = $("#some_table td");
        //将全局函数作为一个普通的jquery对象去使用
        $my.other_results.css("border-color", "red");
        $my.traffic_light.css("border-color", "yellow");
    }
    //也可以在其他函数中使用
});

 

（4）循环时的DOM操作

我们从一个实例开始讲起：

var top_100_list=[...]//假设这里是100个独一无二的字符串
    $mylist=$("#mylist")
    for(var i=0;i<top_100_list.length;i++){
        $mylist.append("<li>"+top_100_list[i]+"</li>");
    }

 

以上代码中，我们将每一个新添加的标签元素都作为一个节点添加到容器ID中，实际上jQuery操作消耗的性能也不低，所以更好的方式是尽可能地减少DOM操作，这里应该将整个元素字符串在插入DOM之前全部创建好，修改代码如下：

var top_100_list=[...]//假设这里是100个独一无二的字符串
    $mylist=$("#mylist")
    for(var i=0;i<top_100_list.length;i++){
        top_100_list[i]+=li>"+top_100_list[i]+"</li>";
    }

$mylist.html(top_100_list[i]);

更有甚者：

for(i=0;i<100;i++){

     var $mylist=$(“#mylist”); //居然把$mylist循环获取了100次

     $mylist.append(“This is item is”+i)

}

（5）数组方式使用jQuery对象

使用jQuery选择器获取结果是一个jQuery对象，然而，jQuery类库会让你感觉你正在使用一个定义了索引和长度的数组。在性能方面，建议使用简单for或者while循环来处理，而不是$.each()，这样能使代码更快。

$.each(array,function(i) {
        array[i]=i;
    });

 

用for循环来代替$.each()

var array=new Array();
    for(var i=0;i<array.length;i++){
        array[i]=i;
    }

 

另外注意检查长度也是一个检查jQuery对象是否存在的方式：

var $comment=$("#comment");
    if($comment){//总是true
        //do somethis
    }
    if($comment.length){//拥有元素才返回true
        //do something
    }

 

（6）事件代理

每一个javascript事件（例如：click，mouseover等）都会冒泡到父级节点。当我们需要给多个元素调用同个函数时这点很有用。

比如，要为一个table绑定这样一个行为：点击td后，把背景色设置为红色，代码如下：

$("#mytable td").click(function(){
        $(this).css("background-color","red");
    })

 

那么假设有100个td元素，在使用以上方式的时候，你绑定了100个事件，这将带来很负面的性能影响。代替这种效率很差的多元素事件监听的方法就是：只需向它们的父节点绑定一次事件，然后通过event.target获取当前点击的元素，代码如下：

$("#mytable").click(function(e){
        var $clickele=$(e.target); //e.target捕捉到触发的目标元素
        $clickele.css("background-color","red");
    });

 

在jQuery1.7中新增on（），来帮助你将整个时间监听封装到一个便利方法中，如下：

$("#mytable").on(‘click’,’td’,function(){
        $clickele.css("background-color","red");
    });

（7）将代码转化成jQuery插件

如果每次都需要花上一定的时间去开发类似的jQuery代码，那么可以考虑将代码变成插件。这样能够使代码有更好的重用性，并且能够有效的帮助你组织代码。创建jQuery插件教程：

（8）使用join（）来拼接字符串

也许你之前一直使用"+”来拼接字符串，现在你可以改改了。虽然它可能会有点奇怪，但它确实有助于优化性能，尤其是长字符串处理的时候

例如：

var array=[];
    for(var i=0;i<array.length;i++){
        array[i]=i;
    }
    $("#list").html(array.join(‘‘));

 

（9）合理利用HTML5的Data属性

html5中的data属性可以帮助我们插入数据，特别是前后端的数据交换。jQuery的data（）方法，有效地利用哦个了html5的属性，来自动得到数据。例如：

html代码：

             <div id=”data1” data-role=”page” data-last-value=”33” data-options=’{“name”:”Jhon”}’></div>

jQuery代码：

            $(“#data1”).data(“role”);          //page

            $(“#data1”).data(“lastvalue”)      //33

            $(“$data1”).data(“options”)          //Jhon

（10）尽量使用原生的js

下面一段代码用来判断多选框是否被选中：

jQuery代码：

var $cs=$("#cs"); //jQuery对象
    $cs.click(function() {
        if($cr.is(":checked")){ //jQuery判断方式
            alert("感谢您的支持！");
        }
    });

 

javascript代码：

var $cr=$("#cr"); //jQuery对象
    var cr=$cr.get(0); ///DOM对象
    $cs.click(function() {
        if(cr.checked){ //原生javascript方式判断
            alert("感谢您的支持！");
        }
    });

 

毋庸置疑，第二种方式效率高于第一种方式，因为它不需要拐弯抹角地去调用很多函数。经验告诉我们，方法的选择很重要，有时候你也许根本不需要jQuery。

（11）压缩javascript代码

现在的Web项目总是离不开大量的javascript，而JS文件的体积越来越大，随之也影响到页面的感知性能。因此，需要对javascript文件进行压缩，一方面是使用Gzip；另一方面是去除javascript文件里的注释、空白，并且压缩局部变量长度等。

js压缩工具很多，可以使用老牌的JSMin，YUI Compressor，它们都可以用来压缩js，后者还可以用来处理CSS，也可以使用新工具，比如Google Closure Compiler和UglifyJS。