码迷,mamicode.com
首页 > Web开发 > 详细

jQuery性能优化与技巧

时间:2015-02-04 16:09:58      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:

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("感谢您的支持!你可以继续操作!");
            }
        });
    });

同样,类似

$(this).css("color","red");      优化成      this.style.color="red";
$("<p></p>");      优化成      $(document.createElement("p"));

11、压缩javascript

jQuery性能优化与技巧

标签:

原文地址:http://www.cnblogs.com/zhaojieln/p/4272565.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!