在javascript關於提高網站性能的幾點建議(一)中,從HTTP請求到頁面渲染幾個方面對提高網站性能提出了幾點建議,本文是學習Steve Sounders的另外一本書《高性能網站建設進階指南》之後,從JavaScript性能的角度進行總結概括,諸君共勉。
JavaScript性能是實現高性能Web應用程序的關鍵
——Steve Sounders
1 利用js作用域鏈
作用域鏈(scope chain)
當執行一段JavaScript代碼(全局代碼或函數)時,JavaScript引擎會創建為其創建一個作用域又稱為執行上下文(Execution Context),在頁面加載後會首先創建一個全局的作用域,然後每執行一個函數,會建立一個對應的作用域,從而形成了一條作用域鏈。每個作用域都有一條對應的作用域鏈,鏈頭是全局作用域,鏈尾是當前函數作用域。
作用域鏈的作用是用於解析標識符,當函數被創建時(不是執行),會將this、arguments、命名參數和該函數中的所有局部變量添加到該當前作用域中,當JavaScript需要查找變量X的時候(這個過程稱為變量解析),它首先會從作用域鏈中的鏈尾也就是當前作用域進行查找是否有X屬性,如果沒有找到就順著作用域鏈繼續查找,直到查找到鏈頭,也就是全局作用域鏈,仍未找到該變量的話,就認為這段代碼的作用域鏈上不存在x變量,並拋出一個引用錯誤(ReferenceError)的異常。
管理好作用域鏈的深度,是一種只要少量工作就能提高性能的簡易方法,我們應避免因無意中增長了作用域鏈而導致執行速度變得緩慢。
使用局部變量(盡量縮短作用域鏈)
如果理解了作用域鏈的概念,那麼我們應該清楚JavaScript引擎對變量的解析時間跟作用域鏈的深度有關,顯而易見,局部變量由於處於鏈尾,存取速度是最快的,因此,一個好的經驗是:任何非局部變量使用超過一次時,請使用局部變量將其存儲下來,例如:
function changeDiv(){ document.getELementById('myDiv').className = 'changed'; document.getELementById('myDiv').style.height = 150; }
這裡myDiv這個dom元素被引用了兩次,為了更快的引用,我們應該用一個局部變量將其存儲下來,這樣做的好處不僅縮短了作用域鏈,而且避免了DOM元素的重復查詢:
function changeDiv(){ var myDivStyle = document.getElementById('myDiv').style; myDiv.className = 300; myDiv.style.height = 150; }
避免使用with(不要增長作用域鏈)
一般在代碼執行過程中,函數的作用域鏈是固定的,然而with可以臨時增長函數的作用域鏈。with用於將對象屬性作為局部變量來顯示,使其便於訪問,例如:
var user = { name:'vicfeel', age:'23' }; function showUser(){ var local = 0; with(user){ console.log("姓名" + name); console.log("年齡" + age); console.log(local); } } showUser();
這個例子中,通過with在showUser作用域鏈的鏈尾中又增加了一個臨時作用域,該作用域存儲著user對象的所有屬性,也就是增長了with這段代碼的作用域鏈,在這段代碼中,局部變量像local從鏈尾的第一個對象變成了第二個,自然減慢了標識符的存取。直到with語句結束,作用域鏈恢復增長。正因為with的這個缺陷,我們應盡量避免使用with關鍵字。
2 更合理的流控制
JavaScript與其它編程語言一樣,擁有一些流控制語句(循環、條件等),在每個環節上使用恰當的語句能極大的提高腳本的運行速度。
快速條件判斷
提到條件判斷,首先要避免的一種使用方式:
if(value == 0){ return result0; } else if(value == 1){ return result1; } else if(value == 2){ return result2; } else if(value == 3){ return result3; } else if(value == 4){ return result4; } else if(value == 5){ return result5; } else if(value == 6){ return result6; } else{ return result7; }
這種使用if進行條件判斷的方式存在的主要問題是層次太深,當我要value = 7時,消耗時間要比value = 0長很多,大大損耗了性能,同時可讀性很差。
一種更好的方式,利用switch進行判斷。
swithc(value){ case 0: return result0; case 1: return result1; case 2: return result2; case 3: return result3; case 4: return result4; case 5: return result5; case 6: return result6; default: return result7; }
這樣不僅提高了可讀性,查詢時間也要比if更快。但是如果只有一兩個條件時,if是比switch更快的
在JavaScript中,條件查詢還有另外一種方式,之前的例子是根據值返回不同的值,剛好可以利用數組實現hash表的映射查詢。
//定義數組 var results = [result0,result1,result2,result3,result4,result5,result6,result7]; //查詢結果 return results[value];
這種數組的方式,在查詢范圍很大時才更加有效,因為它不必檢測上下邊界,只需要填入索引值就可以查詢了。它的局限性在於條件對應的是單一值,而不是一系列操作。因此要綜合實際情況,選擇合適的條件判斷方式,發揮性能最大化。
快速循環
JavaScript中存在4種循環方式for循環、do-while循環、while循環和for-in循環。下面是一個很常用的循環使用方式:
var values = [1,2,3,4,5]; for(var i = 0;i < values.length;i++){ process(values[i]); }
我們可以看到,這段代碼最明顯可以優化的地方在於values.length,每次循環i都要和values的長度進行比較,而查詢屬性要比局部變量更耗時,如果循環次數越大,這種耗時就越明顯,因此可以這樣優化:
var values = [1,2,3,4,5]; var length = values.length;//局部變量存儲數組長度 for(var i = 0;i < length;i++){ process(values[i]); }
這段代碼還可以繼續優化,將循環變量遞減到0,而不是遞加到總長度。
var values = [1,2,3,4,5]; var length = values.length; for(var i = length;i--;){ //遞減到0 process(values[i]); }
這裡將循環結束改造為與0比較,所以每個循環的速度更快了,根據循環的復雜度不同,這種簡單改變可以比原來節約大概50%的時間。