有效提高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 < 1000; i++ ) {
  var elmt = document.createElement('p');
  elmt.innerHTML = i;
  document.body.appendChild(elmt);
}

建議改成：

複製代碼 代碼如下:

var html = [];
for (var i = 0; i < 1000; i++) {
  html.push('<p>' + i + '</p>');
}
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 < x.length; 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個元素