提高Javascript效能注意事項

最近自己的寫的js代碼老感覺很亂 是該理一理怎麼寫了

一．執行效率
1. DOM
1.1 使用DocumentFragment最佳化多次append
說明：添加多個dom元素時，先將元素append到DocumentFragment中，最後統一將DocumentFragment添加到頁面。
該做法可以減少頁面渲染dom元素的次數。經IE和Fx下測試，在append1000個元素時，效率能提高10%-30%，Fx下提升較為明顯。

服用前：
for (var i = 0; i < 1000; i++) {
var el = document.createElement(‘p’);
el.innerHTML = i;
document.body.appendChild(el);
}

服用後：
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
var el = document.createElement(‘p’);
el.innerHTML = i;
frag.appendChild(el);
}
document.body.appendChild(frag);

1.2 通過模板元素clone，替代createElement
說明：通過一個模板dom對象cloneNode，效率比直接建立element高。
效能提高不明顯，約為10%左右。在低於100個元素create和append操作時，沒有優勢。

服用前：
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
var el = document.createElement(‘p’);
el.innerHTML = i;
frag.appendChild(el);
}
document.body.appendChild(frag);

服用後：
var frag = document.createDocumentFragment();
var pEl = document.getElementsByTagName(‘p’)[0];
for (var i = 0; i < 1000; i++) {
var el = pEl.cloneNode(false);
el.innerHTML = i;
frag.appendChild(el);
}
document.body.appendChild(frag);

1.3 使用一次innerHTML賦值代替構建dom元素
說明：根據資料構建列表樣式的時候，使用設定列表容器innerHTML的方式，比構建dom元素並append到頁面中的方式，效率有數量級上的提高。

服用前：
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
var el = document.createElement(‘p’);
el.innerHTML = i;
frag.appendChild(el);
}
document.body.appendChild(frag);

服用後：
var html = [];
for (var i = 0; i < 1000; i++) {
html.push(‘<p>’ + i + ‘</p>’);
}
document.body.innerHTML = html.join(”);

1.4 使用firstChild和nextSibling代替childNodes遍曆dom元素
說明：約能獲得30%-50%的效能提高。逆向遍曆時使用lastChild和previousSibling。

服用前：
var nodes = element.childNodes;
for (var i = 0, l = nodes.length; i < l; i++) {
var node = nodes[i];
……
}

服用後：
var node = element.firstChild;
while (node) {
……
node = node.nextSibling;
}

2. 字串

2.1 使用Array做為StringBuffer，代替字串拼接的操作
說明：IE在對字串拼接的時候，會建立臨時的String對象；經測試，在IE下，當拼接的字串越來越大時，運行效率會急劇下降。Fx和Opera都 對字串拼接操作進行了最佳化；經測試，在Fx下，使用Array的join方式執行時間約為直接字串拼接的1.4倍。

服用前：
var now = new Date();
var str = ”;
for (var i = 0; i < 10000; i++) {
str += ’123456789123456789′;
}
alert(new Date() – now);

服用後：
var now = new Date();
var strBuffer = [];
for (var i = 0; i < 10000; i++) {
strBuffer.push(’123456789123456789′);
}
var str = strBuffer.join(”);
alert(new Date() – now);

3. 迴圈語句

3.1 將迴圈控制量儲存到局部變數
說明：對數組和列表對象的遍曆時，提前將length儲存到局部變數中，避免在迴圈的每一步重複取值。

服用前：
var list = document.getElementsByTagName(‘p’);
for (var i = 0; i < list.length; i++) {
……
}

服用後：
var list = document.getElementsByTagName(‘p’);
for (var i = 0, l = list.length; i < l; i++) {
……
}

3.2 順序無關的遍曆時，用while替代for
說明：該方法可以減少局部變數的使用。比起效率最佳化，更能直接看到的是字元數量的最佳化。該做法有程式員強迫症的嫌疑。

服用前：
var arr = [1,2,3,4,5,6,7];
var sum = 0;
for (var i = 0, l = arr.length; i < l; i++) {
sum += arr[i];
}

服用後：
var arr = [1,2,3,4,5,6,7];
var sum = 0, l = arr.length;
while (l–) {
sum += arr[l];
}

4. 條件分支

4.1 將條件分支，按可能性順序從高到低排列
說明：可以減少解譯器對條件的探測次數。

4.2 在同一條件子的多（>2）條件分支時，使用switch優於if
說明：switch分支選擇的效率高於if，在IE下尤為明顯。4分支的測試，IE下switch的執行時間約為if的一半。

4.3 使用三目運算子覆寫準則分支
服用前：
if (a > b) {
num = a;
} else {
num = b;
}

服用後：
num = a > b ? a : b;

5. 定時器

5.1 需要不斷執行的時候，優先考慮使用setInterval
說明：setTimeout每一次都會初始化一個定時器。setInterval只會在開始的時候初始化一個定時器

服用前：
var timeoutTimes = 0;
function timeout () {
timeoutTimes++;
if (timeoutTimes < 10) {
setTimeout(timeout, 10);
}
}
timeout();

服用後：
var intervalTimes = 0;
function interval () {
intervalTimes++;
if (intervalTimes >= 10) {
clearInterval(interv);
}
}
var interv = setInterval(interval, 10);

5.2 使用function而不是string
說明：如果把字串作為setTimeout和setInterval的參數，瀏覽器會先用這個字串構建一個function。

服用前：
var num = 0;
setTimeout(‘num++’, 10);

服用後：
var num = 0;
function addNum () {
num++;
}
setTimeout(addNum, 10);

6. 其他

6.1 盡量不使用動態文法元素
說明：eval、Function、execScript等語句會再次使用javascript解析引擎進行解析，需要消耗大量的執行時間。

6.2 重複使用的調用結果，事先儲存到局部變數
說明：避免多次取值的調用開銷。

服用前：
var h1 = element1.clientHeight + num1;
var h2 = element1.clientHeight + num2;

服用後：
var eleHeight = element1.clientHeight;
var h1 = eleHeight + num1;
var h2 = eleHeight + num2;

6.3 使用直接量
說明：
var a = new Array(param,param,…) -> var a = []
var foo = new Object() -> var foo = {}
var reg = new RegExp() -> var reg = /…/

6.4 避免使用with
說明： with雖然可以縮短代碼量，但是會在運行時構造一個新的scope。
OperaDev上還有這樣的解釋，使用with語句會使得解譯器無法在文法解析階段對代碼進行最佳化。對此說法，無法驗證。

服用前：
with (a.b.c.d) {
property1 = 1;
property2 = 2;
}

服用後：
var obj = a.b.c.d;
obj.property1 = 1;
obj.property2 = 2;

6.5 巧用||和&&布林運算子
重要程度：★★★

服用前：
function eventHandler (e) {
if(!e) e = window.event;
}

服用後：
function eventHandler (e) {
e = e || window.event;
}

服用前：
if (myobj) {
doSomething(myobj);
}

服用後：
myobj && doSomething(myobj);

6.6 類型轉換
說明：
1).    數字轉換成字串，應用”" + 1，效能上：(“” +) > String() > .toString() > new String()；
2).    浮點數轉換成整型，不使用parseInt()， parseInt()是用於將字串轉換成數字，而不是浮點數和整型之間的轉換，建議使用Math.floor()或者Math.round()
3).    對於自訂的對象，推薦顯式調用toString()。內部操作在嘗試所有可能性之後，會嘗試對象的toString()方法嘗試能否轉化為 String。

二．記憶體管理

2.1 循環參考
說明：如果循環參考中包含DOM對象或者ActiveX對象，那麼就會發生記憶體泄露。記憶體泄露的後果是在瀏覽器關閉前，即使是重新整理頁面，這部分記憶體不會被 瀏覽器釋放。

簡單的循環參考：
var el = document.getElementById(‘MyElement’);
var func = function () {…}
el.func = func;
func.element = el;

但是通常不會出現這種情況。通常循環參考發生在為dom元素添加閉包作為expendo的時候。

如：
function init() {
var el = document.getElementById(‘MyElement’);
el.onclick = function () {……}
}
init();

init在執行的時候，當前上下文我們叫做context。這個時候，context引用了el，el引用了function，function引用了 context。這時候形成了一個循環參考。

下面2種方法可以解決循環參考：

1)    置空dom對象

服用前：
function init() {
var el = document.getElementById(‘MyElement’);
el.onclick = function () {……}
}
init();

服用後：
function init() {<