有效提升JavaScript執行效率的幾點知識_javascript技巧

為了提供新鮮、別緻的使用者體驗，許多網站都會使用 JavaScript 來改善設計、驗證表單、檢查瀏覽器，以及Ajax請求，cookie操作等等，實現無刷新動態效果 。但是，要將大量內容在瀏覽器中呈現，如果處理不好，網站效能將會急劇下降。所以我們有必要了解下，如何提升JavaScript的執行效率。

JavaScript 函數

在JavaScript 中，函數在使用前會預先編譯。儘管有些時候下可以使用字串取代函數，但每次執行這段JavaScript 程式碼時都會重新解析，影響效能。

1、eval例子

複製程式碼 程式碼如下:

eval('output=(input * input)');
// 建議改成：
eval(new function() { output=(input * input)});

2、setTimeout範例

複製程式碼 程式碼如下:

setTimeout("alert(1)", 1000);
// 建議改成:
setTimeout(function(){alert(1)}, 1000);

使用函數取代字串作參數確保新方法中的程式碼能被 JavaScript 編譯器最佳化。

JavaScript作用域

JavaScript作用域鏈中的每個作用域都包含幾個變數。理解作用域鏈很重要，這樣才能利用它。

複製程式碼 程式碼如下:

var localVar = "global"; //全域變數

function test() {

  var localVar = "local"; //局部變數

  //局部變數
  alert(localVar);

  //全域變數
  alert(this.localVar);

  //找document在局部變數找不到，就找全域變數
  var pageName = document.getElementById("pageName");
}

使用局部變數比使用全域變數快得多，因為在作用域鏈中越遠，解析越慢。下圖顯示了作用域鏈結構：

如果程式碼中有 with 或 try-catch 語句，作用域鏈會比較複雜，如下圖：

JavaScript字串

JavaScript中一個非常影響效能的函數是字串連接，一般情況都是使用 號來實作拼接字串。但是早期瀏覽器並沒有對這樣的連接方式做最佳化，導致在連續建立和銷毀字串嚴重降低JavaScript執行效率。

複製程式碼 程式碼如下:

var txt = "hello" " " "world";

建議改成：

複製程式碼 程式碼如下:

var o = [];
o.push("hello");
o.push(" ");
o.push("world");
var txt = o.join();

我們再簡單封裝一下：

複製程式碼 程式碼如下:

function StringBuffer(str) {
    var arr = [];
    arr.push(str || "");
    this.append = function(str) {
        arr.push(str);
        return this;
    };
    this.toString = function() {
        return arr.join("");
    };
};

然後這樣子呼叫：

複製程式碼 程式碼如下:

var txt = new StringBuffer();
txt.append("Hello");
txt.append(" ");
txt.append("World");
alert(txt.toString());

JavaScript DOM操作

HTML Document Object Model (DOM) 定義了存取和操作 HTML 文件的標準方法。它將 HTML 文件表示成節點樹，其中包含元素、屬性和文字內容。透過使用 HTML DOM，JavaScript 能存取 HTML 文件中所有節點並操作它們。

DOM重繪

每次修改到頁面的DOM對象，都涉及DOM重繪，瀏覽器都會重新渲染頁面。所以降低DOM物件的修改次數，可以有效提升JavaScript 的效能。

複製程式碼 程式碼如下:

for (var i = 0; i   var elmt = document.createElement('p');
  elmt.innerHTML = i;
  document.body.appendChild(elmt);
}

建議改成：

複製程式碼 程式碼如下:

var html = [];
for (var i = 0; i   html.push('

' i '

');
}
document.body.innerHTML = html.join('');

DOM訪問

透過DOM可以存取到HTML文件中的每個節點。每次呼叫getElementById()、getElementsByTagName()等方法，都會重新尋找並存取節點。所以將查找到的DOM節點快取一下，也可以提升JavaScript 的效能。

複製程式碼 程式碼如下:

document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";

建議改成：

複製程式碼 程式碼如下:

var elmt = document.getElementById("p2");
elmt.style.color = "blue";
elmt.style.fontFamily = "Arial";
elmt.style.fontSize = "larger";

DOM遍歷

DOM遍歷子元素通常都是以索引循環讀取下一個子元素，在早期瀏覽器下這種讀取方式執行效率很低，利用nextSibling方式可以提高js遍歷DOM的效率。

複製程式碼 程式碼如下:

var html = [];
var x = document.getElementsByTagName("p");//所有節點
for (var i = 0; i   //todo
}

建議改成：

複製程式碼 程式碼如下:

var html = [];
var x = document.getElementById("div");//上級節點
var node = x.firstChild;
while(node != null){
  //todo
  node = node.nextSibling;
}

JavaScript 記憶體釋放

在web應用程式中，隨著DOM物件數量的增加，記憶體消耗會越來越大。所以應及時釋放物件的引用，讓瀏覽器回收這些記憶體。

釋放DOM佔用的記憶體

複製程式碼 程式碼如下:

document.getElementById("test").innerHTML = "";

將DOM元素的innerHTML設定為空字串，可以釋放其子元素所佔用的記憶體。

釋放javascript物件

複製程式碼 程式碼如下:

//物件：
obj = null
//物件屬性：
delete obj.property
//陣列元素：
arr.splice(0,3);//刪除前3個元素