JQuery Tips(4)----一些關于提高JQuery性能的Tips

如今咱祖國已經崛起了..電腦的配置也是直線上升.可是js的性能問題依然不可小觑..尤其在萬惡的IE中..js引擎速度本來就慢..如果JS如果再寫不好，用戶端多開幾個視窗假死肯定是家常便飯了.廢話不說了，下面說說js性能提升的一些小Tips.

在選擇時，最好以ID選擇符作為開頭

我想這個很好了解，因為JQuery内部使用document.getElementByID方法進行ID選擇，這種方法比其他所有對DOM選擇的方法更快，是以以$("#")開頭是最好的,比如:

<div id="a">

   <div class="b">

      <div class="c">

          <div class="d"></div>

      </div>

   </div>

</div>

    <script type="text/javascript">

        $(".b .c .d")//slow one

        $("#a .b .c .d")//fast one

    </script>

提供$()的上下文

在使用$()選擇頁面元素時，提供選擇的範圍可以減少選擇的時間，換句話說，讓選擇器隻在頁面的一小片範圍内篩選而不是整個頁面當然會減少篩選時間，通過在$()函數内提供第二個參數作為上下文可以實作這一點

    <div id="test">

       <div class="inner">hi</div>

    </div>

        alert($(".inner", document.getElementById("test")).text());//increase the speed by provide context

        alert($(".inner").text());//traverse all the element so that is slower than above

當然，在jquery定義(或者js函數)事件内,可以通過this來指代上下文:

        $("#test").click(function() {

            var text = $(".inner", this).text(); //this means $("#test")

            alert(text);//alert hi

        });

當然，上面的例子也可以寫成下面兩種方式：

        alert($("#test .inner").text()); //method 1

        alert($("#test").find(".inner").text());//method 2 and it was best one

其中利用find方法是所有方法中效率最高的

當然，如果你是通過id選擇符，也就是$("#..")來選擇，不需要提供上下文參數.這對速度沒有影響

将經常用的JQuery包裝好的元素進行儲存

如題，這點比較重要，因為使用$()對頁面元素進行選擇是需要耗費時間的.而儲存為變量進行使用時，可以避免這種浪費，比如：

    <ul>

    <li>one</li>

    <li>two</li>

    <li>three</li>

    <li>four</li>

    <li>five</li>

    </ul>

        for (i = 0; i < $("ul li").length; i++) {//very bad,select $("ul li") so many times,waste a lot of time

            alert($("ul li")[i].innerHTML);//same here,very bad

        }

        var $li = $("ul li");

        for (i = 0; i < $li.length; i++) {//good one,only selct $("ul li") once

            alert($li[i].innerHTML); //same here,good

從代碼可以看到，避免多次重複選擇可以提高性能:-)

盡量少用選擇符

JQuery的選擇器是面向數組的，是以在條件允許的情況下盡量少用選擇器，比如：

<div id="Div0"></div>

<div id="Div1"></div>

<div id="Div2"></div>

        $("#Div0").slideDown("slow");

        $("#Div1").slideDown("slow");

        $("#Div2").slideDown("slow");//slow

        $("Div0,Div1,Div2").slideDown("slow");//fast

可以看出，使用選擇器并用逗号将被選擇的元素分開，并選擇多個元素不僅讓代碼更加簡潔，并且通過減少建立JQuery的執行個體是以在性能上也稍勝一籌!

在循環次數很多時避免使用$().each,而使用for循環

使用$().each方法讓在進行循環時，會讓程式設計更加輕松，少量的循環在使用$().each時對性能的影響可以忽略不計，但是當這個數字很大的時候，對性能的影響便開始變得可觀了.

這個數字，我查了下資料，據說是1000以下可以使用$().each方法，而這個數字如果繼續增加，則應該使用for循環語句。

盡量減少對DOM的操作

在頁面中對DOM操作是比較消耗的（比如在頁面插入或删除一段文字），把這個改動降至最小是保持性能的最佳實踐！比如：

    <ul id="test">

        var $list = $("#test");

        for (i = 1; i < 101; i++) {

            $list.append("<li>Item" + i + "</li>");

        } //very bad,change dom 100 times

        var listItem = "";

        for (j = 1; j < 101; j++) {

            listItem += "<li>Item" + j + "</li>";

        $list.html(listItem);

        //good practice,only modify dom once

可以看出，第一個例子對DOM修改100次，而第二個隻對DOM修改1次，這上面的性能差距是顯而易見的。

可以屏蔽JQuery的動畫效果

在某些情況下，如果，可以關閉JQuery動畫，能對性能進行一定提升，屏蔽的方法是：

        jQuery.fx.off = true;

如果參數可以是JS對象，盡量使用對象

很對JQuery插件，或者JQuery的css和attr方法都接受鍵/值 或 js鍵/值對象 對作為參數，傳遞鍵值對象可以減少JQuery對象的建立，比如:

<div></div>

        $("div").css("display", "block");

        $("div").css("background-color", "blue")

        //slow,because it create more Jquery object

        $("div").css({ "display": "block", "background-color": "blue" });

        //fast,only create one object

當然也可以使用連綴的方式:

        $("div").css("display", "block").css("background-color", "blue");

    </script

但是這種方式的性能不如上面那種.需要使用兩個方法，并且需要多生成臨時對象.

以上都是一些對JQuery性能提升的小Tips

By:CareySon

分類: JQuery

本文轉自CareySon部落格園部落格，原文連結http://www.cnblogs.com/CareySon/archive/2009/12/18/1627205.html，如需轉載請自行聯系原作者