javascript效能優化三 之程式碼優化
阿新 • • 發佈：2020-10-10
程式碼優化介紹
如何精準測試Javascript效能
- 本質上就是採用大量的執行樣本進行數學統計和分析
- 使用基於Benchmark.js的https://jsperf.com/完成
Jsperf使用流程
- 使用GitHub賬號登入
- 填寫個人資訊（非必須）
- 填寫詳細的測試用例資訊（title、slug）
- 填寫準備程式碼（DOM操作時經常使用）
- 填寫必要有setup與teardown程式碼
- 填寫測試程式碼片段
Setup當前的一個前置準備工作，teardown是所有執行程式碼執行後要做的銷燬的動作
慎用全域性變數
為什麼要慎用？
- 全域性變數定義在全域性執行上下文，是所有作用域鏈的頂端
- 全域性執行上下文一直存在於上下文執行棧，直到程式退出
- 如果某個區域性作用域出現了同名變數則會遮蔽或汙染全域性
第一種採用全域性變數，第二種採用區域性變數，然後用jsperf來比較一下兩者的差異
結果可以看出全域性的效果還是非常差的。
快取全域性變數
在程式執行過程中，有些地方的全域性變數是不可避免的，可以將使用中無法避免的全域性變數快取到區域性，比如當我們查詢dom元素的時候，必須使用到document，但是document不是我們後面去定義的，是內建好了去使用的，這種情況下可以把大量需要重複使用的變數放置某個區域性變數中，從而達到快取的效果。
這裡放沒有js的html程式碼
結果可以看出，快取過的程式碼稍微有點優勢。
通過原型物件新增附加方法
在原型物件上新增例項物件需要的方法，把物件放在建構函式的內部和原型鏈上的對比
差別還是比較大的。。。以後還是儘量在原型鏈上增加方法吧。
避開閉包陷阱
關於閉包
- 閉包是一種強大的語法
- 閉包使用不當很容易出現記憶體洩漏
- 不要為了閉包而閉包
如果btn元素不存在了，但是el有一個引用關係，所以垃圾垃圾回收機制也不會回收
在下面把el置為null,可以釋放這個dom的引用
避免屬性訪問方法使用
JavaScript中的面向物件
- JS不需屬性的訪問方法，所有屬性都是外部可見的
- 使用屬性訪問方法只會增加一層重定義，沒有訪問的控制力
對比這兩段程式碼，一個有屬性的訪問函式，一個直接使用物件中的屬性
差距還是比較大的。。。下次不要提供訪問方法了，直接用吧。。。
For迴圈優化
相差不多，但是當達到一定量的時候還是有差距的，可以選擇length先獲取到。
選擇最優的迴圈方法
猜猜哪個效率高。。。
Foreach效率最高。其次for
節點新增優化
節點的新增操作必然會有迴流和重繪
通過數值可以看出，文件碎片要快一點的。
克隆優化節點操作
差不多吧，用克隆來優化節點的操作稍微快一丟丟吧。。。
直接量替換Object操作
