jQuery性能優化

1、jQuery性能優化

（1）使用最新版本的jQuery類庫

jQuery每個新的版本都會較上一版進行Bug修復和一些優化，同時也會包含一些創新，因此建議使用最新版本的jQuery來提升性能。不過須要注意的是，在更換版本後，要記得測試你的代碼，畢竟有時候不是徹底向後兼容。

（2）使用合適的選擇器

①$(「#id」)

使用id來定位DOM元素無疑是最佳提升性能的方式，由於jQuery底層將直接調用本地方法document.getElementById()。若是這個方式不能直接找到你須要的元素，能夠考慮使用find()方法，代碼以下：

$(「#id」).find(「element」);

②$(「p」),$(「div」),$(「input」)

標籤選擇器的性能也是不錯的，它是性能優化的第二選擇，由於jQuery將直接調用本地方法document.getElementByTagName()來定位DOM元素。

③$(「.class」)

類選擇器對於比較欣的瀏覽器如IE9，它支持本地方法document.getElementByClassName()，而對於老的瀏覽器，如IE8或者更早版本，只能靠使用DOM搜索方式來實現，這無疑對性能產生較大的影響。因此建議有選擇性地使用它。

④$(「[attribute=value]」)

對於利用屬性來定位DOM元素，本地javascript方法中並無直接地實現，大多都是使用DOM搜索方式來達到效果，不少現代瀏覽器都支持querySelectorAll（）方法，可是不一樣瀏覽器間的性能仍是有區別，整體來講，使用這種方式來定位DOM元素，性能並非很是理想。因此爲了得到更好的優化效果，建議開發中儘可能避免使用這種對性能有害的方式

⑤$(「:hidden」)

和上面利用屬性來定位DOM的方式相似，這種僞選擇器也一樣沒有直接在本地javascript方法中實現，而且jQuery須要搜索每個元素來定位這個選擇器，這將對應用帶來比較大的性能問題，因此建議儘可能不要使用。若是堅持要使用這種方式，請先使用ID選擇器定位父元素，而後再使用該選擇器，這樣對性能會有幫助，如：

$(「#comment」).find(「:hidden」)

$(「#username」).find(「checkbox」)

以上是使用選擇器的基本規則，性能自上而下依次降低。另外可使用jsPerf來直觀查看性能區別，地址：http://jsperf.com/id-vs-class-vs-tag-selectors/2

總結注意：一、儘可能使用ID選擇器

             二、儘可能給選擇器指定上下文

（3）緩存對象

在開發代碼中，可能會常常這麼寫：

$(「#traffic_light input.on」).bind(「click」,function(){…});

$(「#traffic_light input.on」).css(「border」,」1px solid red」);

$(「#traffic_light input.on」).css(「background-color」,」red」);

$(「#traffic_light input.on」).fadeIn(「slow」);

編程中的跳躍思惟致使你有可能這樣書寫代碼，這無可厚非，可是這樣致使的結果是：jQuery會在建立每個選擇器的過程當中，查找DOM，建立多個jQuery對象。比較好的書寫方式以下：

var $active_light=$(「#traffic_light input.on」);

$active_light.bind(「click」,function(){…});

$active_light.css(「border」,」1px solid red」);

$active_light.css(「background-color」,」red」);

$active_light.fadeIn(「slow」);

然而，在本例中使用鏈式方式將更加簡潔，可是這裏職位說明使用緩存變量的重要性，這和java開發中不要隨意的建立對象同樣，能夠幫助有效地提升代碼運行性能。

使用jQuery鏈式操做再加以改善後：

var $active_light=$(「#traffic_light input.on」);

$active_light.bind(「click」,function(){…}).css({「border」:」1px solid red,"background-color」:」red」}).fadeIn(「slow」);

若是想在其餘函數中使用jQuery對象，可把它們緩存到全局環境中：

$(function() {
    //在全局範圍定義一個對象
    window.$my = {
        head: $("head"),
        traffic_light: $("#traffic_light"),
        traffic_button: $("#traffic_button")
    };

    function do_something() {
        //如今能夠引用存儲的結果並操做它們
        var script = document.createElement("script");
        $my.head.apped(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", "yellow");
    }
    //也能夠在其餘函數中使用
});

 

（4）循環時的DOM操做

咱們從一個實例開始講起：

var top_100_list=[...]//假設這裏是100個獨一無二的字符串
    $mylist=$("#mylist")
    for(var i=0;i<top_100_list.length;i++){
        $mylist.append("<li>"+top_100_list[i]+"</li>");
    }

 

以上代碼中，咱們將每個新添加的標籤元素都做爲一個節點添加到容器ID中，實際上jQuery操做消耗的性能也不低，因此更好的方式是儘量地減小DOM操做，這裏應該將整個元素字符串在插入DOM以前所有建立好，修改代碼以下：

var top_100_list=[...]//假設這裏是100個獨一無二的字符串
    $mylist=$("#mylist")
    for(var i=0;i<top_100_list.length;i++){
        top_100_list[i]+=li>"+top_100_list[i]+"</li>";
    }

$mylist.html(top_100_list[i]);

更有甚者：

for(i=0;i<100;i++){

     var $mylist=$(「#mylist」); //竟然把$mylist循環獲取了100次

     $mylist.append(「This is item is」+i)

}

（5）數組方式使用jQuery對象

使用jQuery選擇器獲取結果是一個jQuery對象，然而，jQuery類庫會讓你感受你正在使用一個定義了索引和長度的數組。在性能方面，建議使用簡單for或者while循環來處理，而不是$.each()，這樣能使代碼更快。

$.each(array,function(i) {
        array[i]=i;
    });

 

用for循環來代替$.each()

var array=new Array();
    for(var i=0;i<array.length;i++){
        array[i]=i;
    }

 

另外注意檢查長度也是一個檢查jQuery對象是否存在的方式：

var $comment=$("#comment");
    if($comment){//老是true
        //do somethis
    }
    if($comment.length){//擁有元素才返回true
        //do something
    }

 

（6）事件代理

每個javascript事件（例如：click，mouseover等）都會冒泡到父級節點。當咱們須要給多個元素調用同個函數時這點頗有用。

好比，要爲一個table綁定這樣一個行爲：點擊td後，把背景色設置爲紅色，代碼以下：

$("#mytable td").click(function(){
        $(this).css("background-color","red");
    })

 

那麼假設有100個td元素，在使用以上方式的時候，你綁定了100個事件，這將帶來很負面的性能影響。代替這種效率不好的多元素事件監聽的方法就是：只需向它們的父節點綁定一次事件，而後經過event.target獲取當前點擊的元素，代碼以下：

$("#mytable").click(function(e){
        var $clickele=$(e.target); //e.target捕捉到觸發的目標元素
        $clickele.css("background-color","red");
    });

 

在jQuery1.7中新增on（），來幫助你將整個時間監聽封裝到一個便利方法中，以下：

$("#mytable").on(‘click’,’td’,function(){
        $clickele.css("background-color","red");
    });

（7）將代碼轉化成jQuery插件

若是每次都須要花上必定的時間去開發相似的jQuery代碼，那麼能夠考慮將代碼變成插件。這樣可以使代碼有更好的重用性，而且可以有效的幫助你組織代碼。建立jQuery插件教程：

（8）使用join（）來拼接字符串

也許你以前一直使用"+」來拼接字符串，如今你能夠改改了。雖然它可能會有點奇怪，但它確實有助於優化性能，尤爲是長字符串處理的時候

例如：

var array=[];
    for(var i=0;i<array.length;i++){
        array[i]=i;
    }
    $("#list").html(array.join(''));

 

（9）合理利用HTML5的Data屬性

html5中的data屬性能夠幫助咱們插入數據，特別是先後端的數據交換。jQuery的data（）方法，有效地利用哦個了html5的屬性，來自動獲得數據。例如：

html代碼：

             <div id=」data1」 data-role=」page」 data-last-value=」33」 data-options=’{「name」:」Jhon」}’></div>

jQuery代碼：

            $(「#data1」).data(「role」);          //page

            $(「#data1」).data(「lastvalue」)      //33

            $(「$data1」).data(「options」)          //Jhon

（10）儘可能使用原生的js

下面一段代碼用來判斷多選框是否被選中：

jQuery代碼：

var $cs=$("#cs"); //jQuery對象
    $cs.click(function() {
        if($cr.is(":checked")){ //jQuery判斷方式
            alert("感謝您的支持！");
        }
    });

 

javascript代碼：

var $cr=$("#cr"); //jQuery對象
    var cr=$cr.get(0); ///DOM對象
    $cs.click(function() {
        if(cr.checked){ //原生javascript方式判斷
            alert("感謝您的支持！");
        }
    });

 

毋庸置疑，第二種方式效率高於第一種方式，由於它不須要拐彎抹角地去調用不少函數。經驗告訴咱們，方法的選擇很重要，有時候你也許根本不須要jQuery。

（11）壓縮javascript代碼

如今的Web項目老是離不開大量的javascript，而JS文件的體積愈來愈大，隨之也影響到頁面的感知性能。所以，須要對javascript文件進行壓縮，一方面是使用Gzip；另外一方面是去除javascript文件裏的註釋、空白，而且壓縮局部變量長度等。

js壓縮工具不少，可使用老牌的JSMin，YUI Compressor，它們均可以用來壓縮js，後者還能夠用來處理CSS，也可使用新工具，好比Google Closure Compiler和UglifyJS。