jquery最佳實踐筆記

jasminecjc發表於2016-07-24
jQuery筆記

使用最新版本

因為新版本會改進效能，還有很多新功能

用對選擇器

  • 最快的選擇器：id選擇器和元素標籤選擇器
    原因：遇到這些選擇器的時候，jQuery內部會自動呼叫瀏覽器的原生方法（比如getElementById()），所以它們的執行速度快

  • 較慢的選擇器：class選擇器
    $(`.className`)的效能，取決於不同的瀏覽器。

    Firefox、Safari、Chrome、Opera瀏覽器，都有原生方法getElementByClassName()，所以速度並不慢。但是，IE5-IE8都沒有部署這個方法，所以這個選擇器在IE中會相當慢。

  • 最慢的選擇器：偽類選擇器和屬性選擇器
    原因：瀏覽器沒有針對的原生方法

  • 優化點
    給選擇器指定上下文

    $(`.class`);//慢的，需要遍歷整個dom去查詢.class
$(`.class`, `#class-container`);//快的，因為它僅在class-container元素下查詢

最快的查詢子元素方法

$parent.find(`.child`)
這條是最快的語句。.find()方法會呼叫瀏覽器的原生方法（getElementById，getElementByName，getElementByTagName等等），所以速度較快。

  • 對比：
    $(`#parent > .child`)

    jQuery內部使用Sizzle引擎，處理各種選擇器。Sizzle引擎的選擇順序是從右到左，所以這條語句是先選.child，然後再一個個過濾出父元素#parent，這導致它比最快的形式大約慢70%。

    $(`#parent .child`)

    這條語句與上一條是同樣的情況。但是，上一條只選擇直接的子元素，這一條可以於選擇多級子元素，所以它的速度更慢，大概比最快的形式慢了77%。

有原生方法可以使用的場合，儘量避免使用jQuery

做好快取

使用鏈式寫法

事件的委託處理（Event Delegation）

少改動DOM結構

  • 如果要插入多個元素，就先把它們合併，然後再一次性插入
    // 更好的,array.join(“)

  • 如果你要對一個DOM元素進行大量處理，應該先用.detach()方法，把這個元素從DOM中取出來，處理完畢以後，再重新插回文件

  • 如果你要在DOM元素上儲存資料，不要寫成下面這樣：

    var elem = $(`#elem`);
elem.data(key,value);

    而要寫成

    var elem = $(`#elem`);
$.data(elem[0],key,value);

    根據測試，後一種寫法要比前一種寫法，快了將近10倍。因為elem.data()方法是定義在jQuery函式的prototype物件上面的，而$.data()方法是定義jQuery函式上面的，呼叫的時候不從複雜的jQuery物件上呼叫，所以速度快得多。（此處可以參閱下面第10點。）

  • 插入html程式碼的時候，使用瀏覽器原生的innerHTML

正確處理迴圈

javascript原生迴圈方法for和while，要比jQuery的.each()方法快，應該優先使用原生方法。

AJAX

  1. 避免使用.getJson() 或 .get()，而是直接使用$.ajax()方法

  2. 不要使用http或https請求，寧願選擇無模式的URLs，從url中去掉http或https

  3. 不要在url中加引數，用data物件傳遞它們。

參考資料

阮一峰老師的部落格

相關文章