jQuery性能优化与技巧

浏览数：17 / 时间：2015年06月09日

1、使用最新版本的jQuery类库

2、使用合适的选择器（以下是使用选择器的基本规则，性能自上而下依次下降）

1）$("#id")

使用id来定位DOM元素无疑是最佳提高性能的方式，因为jquery底层将直接调用本地方法document.getElementById()。

如果这个方式不能直接找到你需要的元素，那么可以考虑调用find()方法。

$("#content").find("div")

建议从最近的ID元素开始往下搜索。

2）$("p"),$("div"),$("input")

jquery将直接调用本地方法document.getElementByTagName()来定位DOM元素。

3）$(".class")

对于比较新的浏览器例如IE9，它支持本地方法document.getElementByClassName()。而对于老的浏览器，只能靠DOM搜索方式来实现，无疑对性能产生较大的影响。

4）$("[attribute=value]")

利用属性来定位DOM元素，本地javascript方法中并没有直接地实现，大多都是使用DOM搜索方式达到效果。性能不是不是非常理想。建议开发中尽量避免。

5)$(":hidden")

同上，没有直接在本地javascript方法中实现。并且jquery需要搜索每一个元素来定位这个选择器。建议不要用。如果坚持使用这种方式，请先使用ID选择器定位父元素，然后再使用该选择器。如：

$("#content").find(":hidden");

$("a.button").filter(":animated");

注意：①尽量使用ID选择器。

②尽量给选择器指定上下文。

3、缓存对象

    $(function () {
//        $("#traffic_light input.on").bind("click",function(){...});
//        $("#traffic_light input.on").css("border","1px dashed yellow");
//        $("#traffic_light input.on").css("background-color","orange");
//        $("#traffic_light input.on").fadeIn("slow");
//        以上导致的结果是：jquery会在创建每一个选择器的过程中，查找DOM,创建多个jquery对象，
//        比较好的方式如下，缓存变量并且使用链式方式更加简洁
//        var $active_light=$("#traffic_light input.on");
//        $active_light.bind("click",function(){...})
//                .css({
//                    "border":"1px dashed yellow",
//                    "background-color":"orange"
//                })
//                .fadeIn("slow");
    });
    //        如果打算在其他函数中使用jquery对象，那么可以缓存到全局环境中。
    window.$my = {
        head: $("head"),
        traffic_light: $("#traffic_light"),
        traffic_button: $("#traffic_button")
    };
    function do_something() {
//        现在你可以引用存储的结果并操作它们
        var script=document.createElement("script");
        $my.head.append(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","green");
//        你也可以在其他函数中使用它们
    }

记住，永远不要让相同的选择器在你的代码里出现多次。

4、循环时的DOM操作

使用jquery可以很方便的添加，删除或者修改DOM节点，但是在一些循环，例如for(),while(),或者$.each()中处理节点时，注意：

    $(function () {
//        var top_100_list= []; //假设这里是100个独一无二的字符串
//        var $myList=$("#mylist");  //jquery选择到<ul>元素
//        for(var i= 0;i<top_100_list.length;i++){
//            $myList.append("<li>"+top_100_list[i]+"</li>");
//        }
//        更好的方式，尽量减少DOM操作，以下将整个元素字符串在插入DOM之前全部创建好
        var top_100_list= [];
        var $myList=$("#mylist");
        var top_100_li="";
        for(var i=0;i<top_100_list.length;i++){
            top_100_li+="<li>"+top_100_list[i]+"</li>";
        }
        $myList.html(top_100_li);
//        切莫
//        for(var i=0;i<100;i++){
//            var $myList=$("#mylist");
//            $myList.append("This is list item"+i);
//        }
    });

5、数组方式使用jquery对象

在性能方面，建议使用简单for或者while循环来处理，而不是$.each()

    $(function () {
        var array=new Array();
//        array=[]; 略...
//        使用each方法
        $.each(array,function(i){
            array[i]=i;
        });
//        使用for代替each()方法
        for(var i=0;i<array.length; i++){
            array[i]=i;
        }
    });

此外，检测长度也是一个检查jquery对象是否存在的方式。

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

6、事件代理

    $(function () {
//        $("#myTable td").click(function(){
//            $(this).css("background","red");
//        });
//        以上，假设有100个td元素，在使用的时候绑定了100个事件，这将带来很负面的性能影响
//        代替这种多元素事件监听的方法就是，只需向它们的父节点绑定一次事件，然后通过event.target获取到点击的当前元素
//        $("#myTable").click(function(e){
//            var $clicked=$(e.target);
//            $clicked.css("background","red");
//        });
//        同时，在jquery1.7中提供了一个新的方式on()，将整个事件监听封装到一个便利的方法中。
        $("#myTable").on("click","td",function(){
            $(this).css("background","red");
        });
    });

7、将你的代码转换成jquery插件

;(function($){
    $.fn.youPluginName=function(){
//        You code goes here
        return this;
    }
})(jQuery);

8、使用join()来拼接字符串

也许之前一直用“+”来拼接长字符串，但现在可以使用join()，它确实有助于优化性能，尤其在长字符串处理的时候

    $(function () {
//   首先创建一个数组，然后循环，最后使用join()把数组转化为字符串
        var array = [];
        for (var i = 0; i <= 10000; i++) {
            array[i] = "<li>" + i + "</li>";
        }
        $("#list").html(array.join(‘‘));
    });

运行效果则添加了10001个li。

9、合理利用HTML5的Data属性

10、尽量使用原生javascript方法

    $(function () {
//        用来判断多选框是否被选中
//        $cr=$("#cr");
//        $cr.click(function(){
//            if($cr.is(":checked")){
//                alert("感谢您的支持！你可以继续操作！");
//            }
//        });
//        这里可以使用原生的javascript
        var $cr=$("#cr");
        var cr=$cr.get(0);
        $cr.click(function(){
            if(cr.checked){
                alert("感谢您的支持！你可以继续操作！");
            }
        });
    });