JS 效能優化小記

【js語法層面的效能優化】

先看乙個2萬次的遍歷性能開銷圖（chrome 版本 83.0.4103.61（正式版本） （64 位））

發現了什麼？同樣是foreach 執行效率截然不同，所以不能簡單的對比 for for...of foreach 效能上的差異，理所當然的認為效能開銷所差無幾，建議使用for 迴圈 不建議使用foreach ,因為foreach在不同語境表現效能表現差異極大

此外array.prototype.includes() 方法明顯的有效能問題，資料量大量時不建議使用，

如果你覺得只是230ms的開銷不足為懼，下面再看不當的使用更驚人的效能開銷資料（19891次遍歷）

下面是效能優化後的開銷

【結語】

js 原生方法的效能開銷問題不能簡單的對比，不同的使用場景效能開銷差異巨大，在資料量較多時，不建議使用foreach includes 方法， for 迴圈遍歷依然是可靠極具效率

let temp = ;

let filter = ;
let i = 20000;
for (; i--;) 
function handleclick() ;
for (let len = filter.length; len--;) 
temp.foreach((v) => )
for (let len = temp.length; len--;) 
temp.foreach((v) => )
temp.foreach((v) => )
for (let v of temp) 
for (let v of temp) 
for (let len = temp.length; len--;) 
}

Js效能優化

1.使用區域性變數來轉接全域性變數或深層屬性，縮小物件訪問層級 2.慎用with，因為with加深了內部的作用域鏈 3.eval無法提前被解析和優化，即無法被預編譯，所以要慎用。4.對字串細化操作時要轉化成字串物件new sting，省得內部每一次都要進行 轉換，影響效率。正規表示式也是如此。5.與...

JS效能優化

下面是一些關於客戶端js效能的一些優化的小技巧 1.頂 關於js的迴圈，迴圈是一種常用的流程控制。js提供了三種迴圈 for while for in 在這三種迴圈中 for in 的效率最差，因為它需要查詢hash鍵，因此應盡量少用for in 迴圈，for while 迴圈的效能基本持平。當然，...

JS效能優化

下面是一些關於客戶端js效能的一些優化的小技巧 1.頂 關於js的迴圈，迴圈是一種常用的流程控制。js提供了三種迴圈 for while for in 在這三種迴圈中 for in 的效率最差，因為它需要查詢hash鍵，因此應盡量少用for in 迴圈，for while 迴圈的效能基本持平。當然，...