淺談JavaScript程式碼效能優化2

メSerendipity 發表於 2021-01-23

一.減少判斷層級

從下圖程式碼中可以明顯看出,同樣的效果判斷層級的減少可以優化效能

淺談JavaScript程式碼效能優化2

二.減少作用域鏈查詢層級

簡單解釋下,下圖中第一個執行foo函式,bar函式內列印name,bar作用域內沒有name,所以作用域鏈往上查詢,foo內部有name,

但是這種寫法實際上是賦值,還要往上查詢,全域性作用域中查詢到name,相比於下圖第二個,多向上查了一級,所以時間要長一些。

(備註:不考慮記憶體空間消耗的前提下,具體根據產品來定。)

淺談JavaScript程式碼效能優化2

三.減少資料讀取次數

簡單解釋下,對於多次頻繁呼叫,比如陣列,物件是比較慢的,因為按照引用關係先要找到堆記憶體中的位置,所以說減少時間的消耗,

就應該減少查詢成員的次數,比如放到一個變數中快取起來(備註:不考慮記憶體空間消耗的前提下,具體根據產品來定。)

淺談JavaScript程式碼效能優化2

淺談JavaScript程式碼效能優化2

四.字面量與構造式

簡單解釋下,下圖中第一個new Object() 相當於呼叫函式,比較慢,而下圖第二個相當於在堆區開闢空間,在裡面放屬性和值就可

以了.

淺談JavaScript程式碼效能優化2

再次舉例說明,下圖中第一個建立的僅僅是個字面量字串,而第二個相當於建立了個字串物件。

淺談JavaScript程式碼效能優化2

五.迴圈優化

簡單解釋下:下圖二中把一個頻繁使用到的值做了一個快取,提升了執行效率。

淺談JavaScript程式碼效能優化2

如下圖所示:在不考慮順序的前提下,while迴圈遞減比for迴圈,執行效率更高一些

淺談JavaScript程式碼效能優化2

六.減少宣告及語句數

簡答解釋下:對於不頻繁使用的資料,不建議先快取,執行的時候再去獲取,降低執行時對記憶體的消耗在執行之前有編譯過程,表示式

量比較多,對單詞要進行詞法拆分變成詞法單元,然後做語法分析,然後轉成程式碼再去執行,時間消耗浪費在這裡了.

淺談JavaScript程式碼效能優化2

淺談JavaScript程式碼效能優化2

減少宣告變數解釋也如上

淺談JavaScript程式碼效能優化2