jQuery性能优化

back>>

1. 优化选择器的执行速度

    - 优先使用ID与标记选择器
    var eleName0=$(“#divTip”);
    var eleName1=$(”div”);
    var eleName2=$(”.myclass”);
    ID选择器速度最快，但是应避免重复修饰：
    var eleName0=$(“#divTip/.myclass/div #divShow”);//错误的修饰方式
    如果通过元素的属性访问，应使用tag修饰 var eleName3=$(“div[title=’tmp’]”)

    - 使用jQuery对象缓存
    jQuery对象缓存，就是在使用jQuery对象时，先尽量使用变量保存对象名，然后通过变量名进行相应的方法操作。

$(“#divTip”).bind(“click”,function(){})
$(“#divTip”).css(“widht”:”20px”);
优化的代码如下：
Var objTmp=$(“#divTip”);
objTmp.bind(“click”,function(){})
objTmp.css(“widht”:”20px”);

 

    定义全局变量：$符号命名，目的是用来避免与其他变量名冲突

 

window.$objPub={
   $objTmp:$(“#divTip”)
}

    使用全局变量调用方式：$objPub. $objTmp.bind(“click”,function(){})

 

    - 给选择器一个上下文
    $(expression,[context]) 指定查找范围context效率低
    例子：

$(function() {
            window.$objPub = { //在全局范围中，定义一个windows对象
                $objTmp0: $("#div0", ".MyCls0"),
                $objTmp1: $("#div1")
            }
            TestFun();
        })
        function TestFun() { //自定义显示div内容的函数
            $objPub.$objTmp0.html("Tmp0");
            $objPub.$objTmp1.html("Tmp1");
        }
//HTML：
  <div class="MyCls0">
         <div id="div0" class="MyCls" title="tmp0"></div>
    </div>
    <div class="MyCls1">
         <div id="div1" class="MyCls" title="tmp1"></div>
    </div>

 

2. 处理选择器中的不规范元素标志

    - 选择器含有特殊符号
    <div id=”div#1[4]” class=”myclass”></div>
    按$(”div#1[4]”)获取元素，不能成功获取，需要转义$(”div\\#1\\[4\\]”)

    - 选择器中含有空格符号

3. 优化事件中的冒泡现象

 

4. 使用data()方法缓存数据
    data()方法可以针对元素定义数据，在元素中存取数据。
    - 取数据data([name])
    - 设置数据 data(name,value)
    - 移除数据 removeData(name)
    在元素上存取移除数据

$(function() {
            $("p").data("tmpData"); //初始时
            //显示初始化数据
            $("#divTip").append($("p").data("tmpData") == null ?
            "初始时：null" : $("p").data("tmpData"));
            $("p").data("tmpData", "陶国荣") //设置
            //显示设置后数据
            $("#divTip").append("<br>赋值后：" + $("p").data("tmpData"));
            $("p").removeData("tmpData") //移除
            //显示移除后数据
            $("#divTip").append($("p").data("tmpData") == null ?
            "<br>移除时：null" : $("p").data("tmpData"));
})

 

    data()方法除了可以存储一般的数据外，还可以存储json格式的值：

 

$(function() {
            $("p").data("tmpData"); //初始时
            //显示初始化数据
            $("#divTip").append($("p").data("tmpData") == null ?
            "初始时：null" : $("p").data("tmpData"));
            $("p").data("tmpData",
           { name: "李建洲", sex: "女", score: "80" }); //设置
            //显示设置后数据
            $("#divTip").append("<br>赋值后：" +
            $("p").data("tmpData").name + "/" +
            $("p").data("tmpData").sex + "/" +
            $("p").data("tmpData").score);
            $("p").removeData("tmpData") //移除
            //显示移除后数据
            $("#divTip").append($("p").data("tmpData") == null ?
            "<br>移除时：null" : $("p").data("tmpData"));
        })

 

5. 解决jQuery库与其他库的冲突

 

6. 使用子查询优化选择器性能
    例如：

$(function() {
            //var $divF = $("#divFrame");//保存最外层对象
            //var $ulF = $divF.find(".ulFrame");//在外层对象中查找
            //var $li0 = $ulF.find(".li0");
            //var $spn = $li0.find("span");//在最近一层中查找
            //var $li1 = $ulF.find(".li1");
            $spn = $("div ul li span");
            $li1 = $("div ul .li1");
            var strTmp = "最终数据：" //初始化显示内容
            strTmp += "<br>" + $spn.html(); //获取内容
            strTmp += "<br>" + $li1.html(); //获取内容
            $("#divTip").append(strTmp); //显示在页面中
})

    $spn = $("div ul li span");$li1 = $("div ul .li1");可以获得同样的查询结果，但是它没有做缓存，性能较低。对于嵌套元素的查找，应尽量使用子查询访问元素。

 

7. 减少对DOM元素直接操作
     DOM元素的操作原理：先在内存中创建DOM结构，然后更新现有的DOM结构。如果直接对DOM进行操作，效率低下。有必要在直接修改DOM前完善大部分DOM操作，最后通过一次直接操作，更新其DOM结构。

$(function() {
            //定义数组
            var arrList = ["list0", "list1", "list2", "list3", "list4", "list5"];
            var strList = ""; //初始化字符
            $.each(arrList, function(index) {
                //遍历后累加数组元素
                strList += ("<li>" + arrList[index] + "</li>");
            })
            //一次性完成DOM元素的增加
            $("#ulFrame").append(strList);
})

 

8. 正确区分DOM对象与jQuery对象

    - DOM对象 ：是指通过传统的Javascript方法获取的DOM元素对象，如：
    var objDom=document.getElementById("#txtTmp");
    var DomValue= objDom.value;
    其中objDom保存的就是表单中的某个指定文本框对象，即DOM对象。变量DomValue获取了Id号为txtTmp的DOM对象的值。

    - jQuery对象 ：指的是通过jQuery语法包装原始的DOM对象后生成的新对象。只要是jQuery对象，就可以使用jQuery库中的所有方法与事件。
    var $obj=$("#txtTmp");
    var Domvalue=$obj.val();
    变量$obj保存的就是表单中指定的文本框对象，由于被$()方法包装，该对象就是jQuery对象。DomValue变量保存通过jQuery中的val()方法获取的jQuery对象的值。

    不能使用DOM对象调用jQuery对象的方法，例子：
    var objDom=document.getElementById("#txtTmp");
    var Domvalur=objDom.val();//这是错误的

    同样，也不能使用jQuery对象调用DOM对象方法，例子：
    var $obj=$("#txtTmp");
    var DomValue=$obj.value;//这是错误的

    - DOM对象与jQuery对象类型转换
    Jquery对象转换为DOM对象：调用jQuery中提供的[index]与get(index)方法即可
    DOM对象转换为jQuery对象：DOM对象通过jQuery方法$()进行包装即可
    例子：

$(function() {
            //***** DOM对象转成jQuery对象 *****//
            //DOM对象
            var objDom0 = document.getElementById("div0");
            //转成jQuery对象
            var $obj0 = $(objDom0);
            //调用jQuery中的方法设置其中的内容
            $obj0.html("DOM对象转成jQuery对象后设置的内容");

            //***** jQuery对象转成DOM对象 *****//
            //jQuery对象
            var $obj1 = $("#div1");
            //转成DOM对象
            var objDom1 = $obj1.get(0);
            //调用JavaScript中的对象方法设置内容
            objDom1.innerHTML = "jQuery对象转成DOM对象后设置的内容";
        })