如何提升JavaScript執行效率與效能在前端開發中位於一個很重要的地方,這節來研究下如何在平常做專案過程中,提升JavaScript效能與運作效率。
循環
循環是很常用的一個控制結構,大部分東西要依靠它來完成,在JavaScript中,我們可以使用for(;;),while() ,for(in)三種循環,事實上,這三種循環中for(in)的效率極差,因為他需要查詢散列鍵,只要可以就應該盡量少用。 for(;;)和while迴圈的表現應該說基本(平常使用時)等價。
而事實上,如何使用這兩個循環,則有很大講究。最後得出的結論是:
如果是循環變數遞增或遞減,不要單獨對循環變數賦值,應該在它最後一次讀取的時候使用嵌套的 或--操作符。如果要與陣列的長度作比較,應該事先把陣列的length屬性放入一個局部變數中,減少查詢次數。舉例,假設arr是一個數組,最佳的遍曆元素方式為:
for(var i=0, len = arr.length;i
或者,如果無所謂順序的話:
for(var i=arr.length;i>0;i--){...}
局部變數和全域變數
局部變數的速度要比全域變數的存取速度更快,因為全域變數其實是全域物件的成員,而局部變數是放在函數的堆疊當中的。
不使用Eval
使用eval相當於在運行時再次調用解釋引擎對內容進行運行,需要消耗大量時間。關於閉包的內容請參考函數式程式設計的有關內容)。先檢查a再檢查a中的b,再檢查b中的c,如此往下。進入一個臨時的地方進行查詢。進行一個操作,而預先把var len=a.length,則就少了一次查詢。 anotherStr操作,而不是要使用s=s anotherStr。 ,例如多次對同一個字串進行=操作的話,最好使用一個快取。 = 0; i
型別轉換
型別轉換是大家常犯的錯誤,因為JavaScript是動態型別語言,你不能指定變數的型別。
1.把數字轉換成字串,應用"""" 1,雖然看起來比較醜一點,但事實上這個效率是最高的,性能上來說:
複製程式碼
程式碼如下:
("""" ) > String() > .toString() > new String()
這條其實和下面的「直接量」有點類似,盡量使用編譯時就能使用的內部操作要比執行時使用的使用者操作要快。
String()屬於內部函數,所以速度很快,而.toString()要查詢原型中的函數,所以速度遜色一些,new String()用於傳回精確的副本。
2.浮點數轉換成整數,這個比較容易出錯,很多人喜歡使用parseInt(),其實parseInt()是用來將字串轉換成數字,而不是浮點數和整數之間的轉換,我們應該使用Math.floor()或Math.round()。
另外,和第二節的物件尋找中的問題不一樣,Math是內部對象,所以Math.floor()其實並沒有太多查詢方法和呼叫的時間,速度是最快的。
3. 對於自訂的對象,如果定義了toString()方法來進行類型轉換的話,推薦明確調用toString(),因為內部的操作在嘗試所有可能性之後,會嘗試對象的toString()方法嘗試能否轉換為String,所以直接呼叫這個方法效率會更高。
使用直接量
其實這個影響倒比較小,可以忽略。什麼叫做使用直接量,例如,JavaScript支援使用[param,param,param,...]來直接表達一個數組,以往我們都使用new Array(param,param,...),使用前者是引擎直接解釋的,後者要呼叫一個Array內部構造器,所以要稍微快一點點。
同樣,var foo = {}的方式也比var foo = new Object();快,var reg = /../;要比var reg=new RegExp()快。
字串遍歷操作
對字串進行循環操作,譬如替換、查找,應使用正則表達式,因為本身JavaScript的循環速度就比較慢,而正則表達式的操作是用C寫成的語言的API,效能很好。
高階物件
自訂高階物件和Date、RegExp物件在建構時都會消耗大量時間。如果可以重複使用,應採用快取的方式。
DOM相關
插入HTML
很多人喜歡在JavaScript中使用document.write來為頁面產生內容。事實上這樣的效率較低,如果需要直接插入HTML,可以找一個容器元素,例如指定一個div或span,並設定他們的innerHTML來將自己的HTML程式碼插入頁面中。
物件查詢
使用[""""]查詢要比.items()更快,這和前面的減少物件查找的思路是一樣的,呼叫.items ()增加了一次查詢和函數的呼叫。
建立DOM節點
通常我們可能會使用字串直接寫HTML來建立節點,其實這樣做
無法保證程式碼的有效性
字串操作效率低
所以應該是用document.createElement()方法,而如果文件中存在現成的樣板節點,應該是用cloneNode()方法,因為使用createElement()方法之後,你需要設定多次元素的屬性,使用cloneNode()則可以減少屬性的設定次數-同樣如果需要建立很多元素,應該先準備一個樣板節點。
定時器
如果針對的是不斷運作的程式碼,不應該使用setTimeout,而應該是用setInterval。 setTimeout每次要重新設定計時器。
其他
腳本引擎
據我測試Microsoft的JScript的效率較Mozilla的Spidermonkey要差很多,無論是執行速度還是內存管理上,因為JScript現在基本也不更新了。但SpiderMonkey不能使用ActiveXObject。
檔案最佳化
檔案最佳化也是一個很有效的手段,刪除所有的空格和註釋,把程式碼放入一行內,可以加快下載的速度,注意,是下載的速度而不是解析的速度,如果是本地,註解和空格並不會影響解釋和執行速度。
總結:直接拿手頭現成的東西比較快,如局部變數比全域變數快,直接量比執行時間構造物件快等等。 盡可能少地減少執行次數,例如先快取需要多次查詢的。盡可能使用語言內建的功能,例如串連連結。盡可能使用系統提供的API,因為這些API是編譯好的二進位程式碼,執行效率很高。 同時,一些基本的演算法上的最佳化,同樣可以用在JavaScript中,例如運算結構的調整,這裡就不再贅述了。
由於JavaScript是解釋型的,一般不會在運行時對字節碼進行優化,所以這些優化仍然是很重要的。如果你對如何提升JavaScript的運行速度有興趣,你也可以查閱本網站提升JavaScript效能的其他文章。