前端效能最佳化：jquery效能最佳化

標籤：

jQuery是前端最常用的一個js架構，其實有部分操作也是可以改進的。大部分情況下，封裝的後效能是會降低的，如果發現很影響，就可以改為原生的。

另外使用jQuery需要注意一下幾點來提高效能：

1不使用each，

jQuery 的each迴圈比原生的for迴圈效能相差幾十倍。

前端效能最佳化：迴圈最佳化

2盡量使用ID，類型，類選取器，避免使用屬性選取器

  盡量使用ID，類，類型選取器，避免屬性選取器。ID，類，類型都有原生的方法，屬性選取器需要遍曆整個DOM，還需要讀取每個節點的屬性進行判斷，效能很低。

  盡量不使用祖孫的選取器，使用父子關係更為明確的選取器，也就是使用更能縮小範圍的選取器，避免大量的遍曆。

HTML DOM 對象 - 方法和屬性

一些常用的 HTML DOM 方法：

getElementById()	返回帶有指定 ID 的元素。
getElementsByTagName()	返回包含帶有指定標籤名稱的所有元素的節點列表（集合/節點數組）。
getElementsByClassName()	返回包含帶有指定類名的所有元素的節點列表。
appendChild()	把新的子節點添加到指定節點。
removeChild()	刪除子節點。
replaceChild()	替換子節點。
insertBefore()	在指定的子節點前面插入新的子節點。

• getElementsByClassName() 在 Internet Explorer 5,6,7,8 中無效。

一些常用的 HTML DOM 屬性：

• innerHTML - 節點（元素）的文本值
• parentNode - 節點（元素）的父節點
• childNodes - 節點（元素）的子節點
• attributes - 節點（元素）的屬性節點

使用方法：

node.getElementById("id");

返回node下ID為id的元素，node可以為document，或者一般的頁面元素

document.getElementsByTagName("p");

返回document下所有的p標籤

node.getElementsByTagName("p");

返回document下所有的p標籤

document.getElementById("main").getElementsByTagName("p");

返回id="main" 的元素的所有後代元素為p的元素， 返回包含文檔中所有 <p> 元素的列表，並且這些 <p> 元素應該是 id="main" 的元素的後代（子、孫等等）

document.getElementById("main").childNodes ("p");

返回id="main" 的元素的所有子項目

3選取器添加第二個參數

  其實jQuery選取器還有第二個參數，來進一步控制選擇的範圍，可以添加第二個參數，來縮小範圍

4使用緩衝

   定義局部變數，緩衝要使用多次的結果，一方面避免反覆調用，反覆在原型鏈上尋找，另一方面局部變數可以加快訪問速度。

$(‘#item‘).css (‘color‘, ‘#123456‘);$(‘#item‘).html (‘hello‘);$(‘#item‘).css (‘background-color‘, ‘#ffffff‘);

改為

$(‘#item‘).css (‘color‘, ‘#123456‘).html (‘hello‘).css (‘background-color‘, ‘#ffffff‘); // 或者var item = $(‘#item‘);item.css (‘color‘, ‘#123456‘);item.html (‘hello‘);item.css (‘background-color‘, ‘#ffffff‘);

5避免頻繁的DOM操作

     修改DOM就會導致瀏覽器重建立立DOM樹和渲染，而這在web中是非常耗時的操作。     

var item = $(‘#list‘); for (var i=0; i<1000; i++) {    item.append (i);}

改為

var list = ‘‘; for (var i=0; i<1000; i++) {    list += ‘<li>‘+i+‘</li>‘;} (‘#list‘).html (list);

或者

var list = []; for (var i=0; i<1000; i++) {    list[i]= ‘<li>‘+i+‘</li>‘;} (‘#list‘).html (list.join(""));

再或者

var list = []; for (var i=0; i<1000; i++) {    list[i]= ‘<li>‘+i+‘</li>‘;} (‘#list‘)[0].innerHTML =list.join("");

6對於很大String的串連搓澡不要使用concat，使用數組的join

10 Ways to Instantly Increase Your jQuery Performance

Faster DHTML in 12 Steps

前端效能最佳化：jquery效能最佳化