zoukankan      html  css  js  c++  java
  • jQuery性能优化

    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

  • 相关阅读:
    实验10 指针2。
    作业5 指针应用1。
    实验9 指针1。
    作业4 函数应用。
    实验8 数组2。
    实验7 综合练习。
    实验6 数组1。
    实验5 函数。
    作业3 应用分支与循环结构解决问题。
    作业2 分支、循环结构。
  • 原文地址:https://www.cnblogs.com/zhaojieln/p/4272565.html
Copyright © 2011-2022 走看看