JQuery教學之效能最佳化

jQuery是一款非常優秀的javascript架構，當我們使用到jQuery後就再也不想回到javascript時冗長的代碼，那麼jQuery的最佳化就擺在了我們的面前。那麼我們最佳化JQuery應該從那些方面入手呢？

        1、使用最新版本的jQuery

        新版本相對於舊版本會做效能上的改進，還有就是添加新功能。

        2、選取器的使用

        我們通常會使用id選取器、class選取器、元素選取器、偽類別選取器和元素選取器。在使用時我的建議是最好使用id選取器，其次是class選取器>元素選取器>Element選取器>偽類別選取器。

        說到選取器時，不可必選的要插上一句，在使用選取器查最好是從具有id的父元素開始逐級向下尋找。

        3、不要過度的使用jQuery

        記住一句話原生的是最快的。jQuery是write less,do more（寫的更少，做的更多）。

        4、做好緩衝

        當時要重複使用一個節點是可以使用一個變數存放，在使用時再調用。避免重複擷取節點，降低效率。

複製代碼 代碼如下:
var inputSelect = $("#head .head_right input");
inputSelect.find("a");
inputSelect.find("i");

        5、使用鏈式操作

        jQuery的一大亮點，就是可以使用鏈式操作。

複製代碼 代碼如下:
$("#content").find(".div").eq(2).html("Hello World");

        6、事件委託

        當需要多個同級元素執行一種類型的事件時，可以採用事件委託的方式。例：

複製代碼 代碼如下:
<div id="content">
    <div><div>
    <div><div>
    <div><div>
    <div><div>
    <div><div>
<div>

    當每個class="div"的div都具備一個click事件的時候我們可以採取事件委託，

複製代碼 代碼如下:
$("#content").on("click","div",function(){   
    $(this).css("color","#ff5500");
  });

        7、正確處理迴圈

         迴圈是一種較耗時的操作，如果可以使用選取器直接選中元素，就不要使用迴圈去一個個的遍曆元素。

        Javascript的原生方法for和while，要比jQuery的each()快。所以應該優先使用原生的方法。

        8、減少JQuery對象的產生

        產生Query對象就會產生對應的屬性和方法，比較佔用資源。所以盡量減少jQuery對象的產生。

        9、變數的範圍

        當一個變數不需要 在多個函數調用時，應該把變數放在函數內，減少代碼執行時尋找代碼的時間。

        10、將某些函數延遲到$(window).load執行

        $(document).ready確實好用，但是它可以再頁面渲染時，其他元素還沒有下載完成就執行。

        11、指令碼的合并

        指令碼都是一一被載入的，減少指令碼數量也能提高效率。

        12、元素封裝

        當給一個節點插入一個內容，可以先把內容進行封裝，再插入。

複製代碼 代碼如下:
var content = "";
$("#head").html(content);

        另外就是進行js檔案的壓縮。

        隨著jQuery的不斷被使用，越來越多的最佳化方法會被發現。