淺談JavaScript程式碼效能優化

メSerendipity 發表於 2021-01-21

可以通過https://jsbench.me/測試網站完成效能測試。

一.慎用全域性變數

1.全域性變數定義在全域性執行上下文,是所有作用域鏈的頂端,在區域性作用域中沒找到的變數都會到全域性變數中去查詢,所以說查詢的

時間消耗比較大。

2.全域性執行上下文一直存在於上下文執行棧,直到程式退出。

3.如果某個及區域性作用域出現了同名變數則會遮蔽或汙染全域性。

下面通過程式碼來解析下 全域性變數儲存和區域性變數儲存 效能比較區域性變數儲存是執行速度更快的

淺談JavaScript程式碼效能優化

二.快取全域性變數

將使用中無法避免的全域性變數快取到區域性,如下圖所示區域性變數快取全域性變數是執行速度更快的

淺談JavaScript程式碼效能優化

淺談JavaScript程式碼效能優化

三.通過原型新增方法

如下圖所示通過原型鏈新增方法是執行速度上比較快

淺談JavaScript程式碼效能優化

四.避開閉包陷阱

閉包特點:

1.外部具有指向內部的引用

2.在外部作用域訪問內部作用域的資料

如下圖所示,呼叫函式foo,foo函式指向了內部fn的存在,也就是外部指向了內部的引用

當呼叫foo函式的時候,我們在foo所在的作用域能夠訪問到foo裡面的name變數,也就是外部作用域訪問內部作用域的資料

淺談JavaScript程式碼效能優化

如下圖所示閉包使用不當很容易出現記憶體洩露

淺談JavaScript程式碼效能優化

首先,btn元素本身就是存在於dom節點上的,只不過是用btn1這個變數在函式內部存了一下,所以說onclick事件是外部指向了內部,滿

足了閉包的第一條,onclick事件在被呼叫的時候,所在的作用域是一個獨立的作用域,跟foo作用域不是一個作用域,在裡面用到了foo作

用域裡面的el,所以滿足閉包的第二條。這樣的程式碼有一個問題,根據我們之前GC垃圾回收的引用機制,btn這個dom物件被引用了2次,

一次是在html中,一次是在foo變數裡面,如果說我們把這個dom節點從html中刪除,等於減少了一次引用,但是在foo內部還有一次引用

不會消失,這就造成了垃圾無法回收,也就是我們說的記憶體洩露。

解決辦法如下,操作完成後把btn1置為null

淺談JavaScript程式碼效能優化

五.避免屬性訪問方法的使用

根據JS的特性,建構函式內部所有的屬性和方法都是對外暴露的,儘量避免建構函式內部使用方法返回屬性,而是應該直接去訪問

屬性,如下圖所示,很明顯 直接訪問屬性更快一些。

淺談JavaScript程式碼效能優化

六.for迴圈優化

如下圖所示,

淺談JavaScript程式碼效能優化

淺談JavaScript程式碼效能優化

七.選擇最優的迴圈方法

如下圖所示,如果我們們只是遍歷陣列的資料,foreach效能最好,其次是for,最後是for in

淺談JavaScript程式碼效能優化

八.文件碎片優化節點新增

如下圖所示,文件碎片節點新增執行速度更快

淺談JavaScript程式碼效能優化

九.克隆優化節點操作

克隆主要是新增Dom節點,可以根據介面上已經存在相似的Dom節點,進行復制,從而減少效能的消耗如下圖所示,克隆DOM節點比

建立DOM節點要快一些。

淺談JavaScript程式碼效能優化

淺談JavaScript程式碼效能優化

十.直接量替換new object

如下圖所示:直接用變數定義陣列的方式比用new Object的方式建立陣列執行明顯要快

淺談JavaScript程式碼效能優化

相關文章