JavaScript代碼優化技巧
我經常覺得JavaScript代碼通常運行得慢僅僅是因為它沒有得到適當的優化。下面是我發現有用的常用優化技術的總結。
性能優化的權衡通常是可讀性，因此何時選擇性能還是可讀性是留給讀者的問題。討論優化必然需要討論基準測試。如果一個函數只代表了實際運行時間的一小部分，那么花幾個小時對函數進行微優化以使其運行速度提高100倍是毫無意義的。如果要進行優化，第一步也是最重要的一步是基準測試。
我已經為所有的場景提供了可運行的示例。默認顯示的是在我的機器上得到的結果（brave 122 on archlinux），你可以自己運行它們。這里不建議使用Firefox上的結果作為參考指標。
1.避免字符串比較
如果你需要在C中比較字符串，你可以使用strcmp(a, b)函數。JavaScript使用===，所以你看不到strcmp。但是它在那里，字符串比較通常需要將字符串中的每個字符與另一個字符串中的字符進行比較，字符串比較是O(n)。要避免的一種常見JavaScript模式是字符串枚舉。但隨著TypeScript的出現，這應該很容易避免，因為枚舉默認為整數。
以下是比較成本：
// 1. string compare
const Position = {
TOP: 'TOP',
BOTTOM: 'BOTTOM',
}
let _ = 0
for (let i = 0; i < 1000000; i++) {
let current = i % 2 === 0 ?
Position.TOP : Position.BOTTOM
if (current === Position.TOP)
_ += 1
}// 2. int compare
const Position = {
TOP: 0,
BOTTOM: 1,
}
let _ = 0
for (let i = 0; i < 1000000; i++) {
let current = i % 2 === 0 ?
Position.TOP : Position.BOTTOM
if (current === Position.TOP)
_ += 1
}
關于基準: 百分比結果表示在1秒內完成的操作數除以最高得分案例的操作數。越高越好。
正如你所看到的，差異可能很大。這種差異并不一定是由于strcmp成本，因為引擎有時可以使用字符串池并通過引用進行比較，但這也是由于整數通常在JS引擎中通過值傳遞，而字符串總是作為指針傳遞，并且內存訪問是昂貴的。在字符串密集的代碼中，這可能會產生巨大的影響。
2.避免不同的shapes
JavaScript引擎試圖通過假設對象具有特定形狀來優化代碼，并且函數將接收相同形狀的對象。這允許它們為該形狀的所有對象存儲該形狀的鍵一次，并將值存儲在單獨的平面數組中。用JavaScript表示：
const objects = [
{
name: 'Anthony',
age: 36,
},
{
name: 'Eckhart',
age: 42
},
]
=>
const shape = [
{ name: 'name', type: 'string' },
{ name: 'age', type: 'integer' },
]
const objects = [
['Anthony', 36],
['Eckhart', 42],
]
我使用了“ shapes 形狀”這個詞來描述這個概念，但要注意，您可能也會發現“隱藏類”或“映射”用于描述它。
例如運行時，如果下面的函數接收到兩個具有形狀{ x: number, y: number }的對象，則引擎將推測未來的對象將具有相同的形狀，并生成針對該形狀優化的機器代碼。
function add(a, b) {
return {
x: a.x + b.x,
y: a.y + b.y,
}
}如果傳遞的對象不是形狀{ x, y }而是形狀{ y, x }，則引擎將需要撤銷其推測，并且函數將突然變得相當慢。我要強調的是，V8特別有3種模式用于訪問：單態（1個形狀），多態（2-4個形狀），和megamorphic（5+形狀）。
// setup
let _ = 0
// 1. monomorphic
const o1 = { a: 1, b: _, c: _, d: _, e: _ }
const o2 = { a: 1, b: _, c: _, d: _, e: _ }
const o3 = { a: 1, b: _, c: _, d: _, e: _ }
const o4 = { a: 1, b: _, c: _, d: _, e: _ }
const o5 = { a: 1, b: _, c: _, d: _, e: _ } // all shapes are equal
// 2. polymorphic
const o1 = { a: 1, b: _, c: _, d: _, e: _ }
const o2 = { a: 1, b: _, c: _, d: _, e: _ }
const o3 = { a: 1, b: _, c: _, d: _, e: _ }
const o4 = { a: 1, b: _, c: _, d: _, e: _ }
const o5 = { b: _, a: 1, c: _, d: _, e: _ } // this shape is different
// 3. megamorphic
const o1 = { a: 1, b: _, c: _, d: _, e: _ }
const o2 = { b: _, a: 1, c: _, d: _, e: _ }
const o3 = { b: _, c: _, a: 1, d: _, e: _ }
const o4 = { b: _, c: _, d: _, a: 1, e: _ }
const o5 = { b: _, c: _, d: _, e: _, a: 1 } // all shapes are different
// test case
function add(a1, b1) {
return a1.a + a1.b + a1.c + a1.d + a1.e +
b1.a + b1.b + b1.c + b1.d + b1.e }
let result = 0
for (let i = 0; i < 1000000; i++) {
result += add(o1, o2)
result += add(o3, o4)
result += add(o4, o5)
}
3.避免使用數組/對象方法
我和其他人一樣喜歡函數式編程，但是除非你在Haskell/OCaml/Rust中工作，函數式代碼被編譯成高效的機器代碼，否則函數式總是比命令式慢。
// setup:
const numbers = Array.from({ length: 10_000 }).map(() => Math.random())
// 1. functional
const result =
numbers
.map(n => Math.round(n * 10))
.filter(n => n % 2 === 0)
.reduce((a, n) => a + n, 0)
// 2. imperative
let result = 0
for (let i = 0; i < numbers.length; i++) {
let n = Math.round(numbers[i] * 10)
if (n % 2 !== 0) continue
result = result + n
}像Object.values()、Object.keys()和Object.entries()這樣的對象方法也有類似的問題，因為它們也分配了更多的數據，而內存訪問是所有性能問題的根源。
4.避免代理
另一個尋找優化收益的地方是避免任何間接來源，通過以下數據可以看出差距。
// 1. proxy access
const point = new Proxy({ x: 10, y: 20 }, { get: (t, k) => t[k] })
for (let _ = 0, i = 0; i < 100_000; i++) { _ += point.x }
// 2. direct access
const point = { x: 10, y: 20 }
const x = point.x
for (let _ = 0, i = 0; i < 100_000; i++) { _ += x }另外一個是訪問深度嵌套對象與直接訪問的對比：
// 1. nested access
const a = { state: { center: { point: { x: 10, y: 20 } } } }
const b = { state: { center: { point: { x: 10, y: 20 } } } }
const get = (i) => i % 2 ? a : b
let result = 0
for (let i = 0; i < 100_000; i++) {
result = result + get(i).state.center.point.x
}
// 2. direct access
const a = { x: 10, y: 20 }.x
const b = { x: 10, y: 20 }.x
const get = (i) => i % 2 ? a : b
let result = 0
for (let i = 0; i < 100_000; i++) {
result = result + get(i)
}5.避免未命中緩存
這一點需要一些低級的知識，但即使在JavaScript中也有含義。從CPU的角度來看，從RAM中檢索內存是很慢的。為了加快速度，它主要使用兩種優化。
5.1 預取
第一個是預取：它提前獲取更多的內存，希望它是你需要的內存。它會猜測你請求一個內存地址后，你會對緊接著的內存區域有需要。所以順序訪問數據是關鍵。在下面的例子中，我們可以觀察到以隨機順序訪問內存的影響。
// setup:
const K = 1024
const length = 1 * K * K
// Theses points are created one after the other, so they are allocated
// sequentially in memory.
const points = new Array(length)
for (let i = 0; i < points.length; i++) {
points[i] = { x: 42, y: 0 }
}
// This array contains the *same data* as above, but shuffled randomly.
const shuffledPoints = shuffle(points.slice())// 1. sequential
let _ = 0
for (let i = 0; i < points.length; i++) { _ += points[i].x }
// 2. random
let _ = 0
for (let i = 0; i < shuffledPoints.length; i++) { _ += shuffledPoints[i].x }5.2 緩存在L1/2/3
CPU使用的第二個優化是L1/L2/L3緩存：它們就像更快的RAM，但它們也更昂貴，所以它們要小得多。它們包含RAM數據，但充當LRU緩存。當新的工作數據需要空間時，數據被寫回主RAM。因此，這里的關鍵是使用盡可能少的數據來將工作數據集保留在快速緩存中。在下面的例子中，我們可以觀察到破壞每個連續緩存的效果。
// setup:
const KB = 1024
const MB = 1024 * KB
const L1 = 256 * KB
const L2 = 5 * MB
const L3 = 18 * MB
const RAM = 32 * MB
const buffer = new Int8Array(RAM)
buffer.fill(42)
const random = (max) => Math.floor(Math.random() * max)// 1. L1
let r = 0; for (let i = 0; i < 100000; i++) { r += buffer[random(L1)] }
// 2. L2
let r = 0; for (let i = 0; i < 100000; i++) { r += buffer[random(L2)] }
// 3. L3
let r = 0; for (let i = 0; i < 100000; i++) { r += buffer[random(L3)] }
// 4. RAM
let r = 0; for (let i = 0; i < 100000; i++) { r += buffer[random(RAM)] }盡可能的去除每一個可以消除的數據或內存分配。數據集越小，程序運行的速度就越快。內存I/O是95%程序的瓶頸。另一個好的策略是將您的工作分成塊，并確保您一次處理一個小數據集。
6.避免大型對象
如第2節所述，引擎使用固定形狀來優化對象。然而當對象變得太大時，引擎別無選擇，只能使用常規的散列表（如Map對象）。正如我們在第5節中看到的，緩存未命中會顯著降低性能。哈希圖很容易出現這種情況，因為它們的數據通常隨機均勻地分布在它們所占用的內存區域中。
// setup:
const USERS_LENGTH = 1_000
// setup:
const byId = {}
Array.from({ length: USERS_LENGTH }).forEach((_, id) => {
byId[id] = { id, name: 'John'}
})
let _ = 0
// 1. [] access
Object.keys(byId).forEach(id => { _ += byId[id].id })
// 2. direct access
Object.values(byId).forEach(user => { _ += user.id })
我們還可以觀察到性能如何隨著對象大小的增加而不斷下降：
// setup:
const USERS_LENGTH = 100_000
如上所述，避免頻繁索引大型對象。最好事先將對象轉換為數組。組織數據以在模型上包含 ID 會有所幫助，因為您可以使用Object.values()而不必引用鍵映射來獲取ID。
7.使用eval
有一些JavaScript很難為引擎優化，通過使用eval()或其衍生物可以進行優化。在這個例子中，我們可以觀察到使用eval()如何避免使用動態對象鍵創建對象的成本：
// setup:
const key = 'requestId'
const values = Array.from({ length: 100_000 }).fill(42)// 1. without eval
function createMessages(key, values) {
const messages = []
for (let i = 0; i < values.length; i++) {
messages.push({ [key]: values[i] })
}
return messages
}
createMessages(key, values)
// 2. with eval
function createMessages(key, values) {
const messages = []
const createMessage = new Function('value',
`return { ${JSON.stringify(key)}: value }`
)
for (let i = 0; i < values.length; i++) {
messages.push(createMessage(values[i]))
}
return messages
}
createMessages(key, values)
關于eval()的常見警告適用于：不要相信用戶輸入，清理傳入eval()代碼的任何內容，不要創建任何XSS可能性。還要注意，某些環境不允許訪問eval()，例如帶有CSP的瀏覽器頁面。
8.數據結構
我不會詳細介紹數據結構，因為它們需要單獨說明。但是請注意，為您的用例使用不正確的數據結構可能會比上面的任何優化都產生更大的影響。我建議你熟悉本地的，比如Map和Set，并學習鏈表，優先級隊列，樹（RB和B+）。
作為一個快速的例子，讓我們比較一下Array.includes和Set.has在一個小列表中的表現：
// setup:
const userIds = Array.from({ length: 1_000 }).map((_, i) => i)
const adminIdsArray = userIds.slice(0, 10)
const adminIdsSet = new Set(adminIdsArray)// 1. Array
let _ = 0
for (let i = 0; i < userIds.length; i++) {
if (adminIdsArray.includes(userIds[i])) { _ += 1 }
}
// 2. Set
let _ = 0
for (let i = 0; i < userIds.length; i++) {
if (adminIdsSet.has(userIds[i])) { _ += 1 }
}
正如你所看到的，數據結構的選擇產生了非常大的影響。
最后
本文主要討論了JavaScript代碼性能優化的技巧。許多JavaScript代碼的性能沒有達到最佳，主要是因為沒有進行適當的優化。
在優化時要考慮性能和可讀性之間的權衡，并建議在優化前進行基準測試。也要考慮實際的運行環境，并使用合適的工具和方法來測試和驗證優化效果。希望你能學到一些有用的技巧。
