JavaScript代碼優(yōu)化技巧
我經(jīng)常覺得JavaScript代碼通常運(yùn)行得慢僅僅是因?yàn)樗鼪]有得到適當(dāng)?shù)膬?yōu)化。下面是我發(fā)現(xiàn)有用的常用優(yōu)化技術(shù)的總結(jié)。
性能優(yōu)化的權(quán)衡通常是可讀性，因此何時(shí)選擇性能還是可讀性是留給讀者的問題。討論優(yōu)化必然需要討論基準(zhǔn)測試。如果一個(gè)函數(shù)只代表了實(shí)際運(yùn)行時(shí)間的一小部分，那么花幾個(gè)小時(shí)對函數(shù)進(jìn)行微優(yōu)化以使其運(yùn)行速度提高100倍是毫無意義的。如果要進(jìn)行優(yōu)化，第一步也是最重要的一步是基準(zhǔn)測試。
我已經(jīng)為所有的場景提供了可運(yùn)行的示例。默認(rèn)顯示的是在我的機(jī)器上得到的結(jié)果（brave 122 on archlinux），你可以自己運(yùn)行它們。這里不建議使用Firefox上的結(jié)果作為參考指標(biāo)。
1.避免字符串比較
如果你需要在C中比較字符串，你可以使用strcmp(a, b)函數(shù)。JavaScript使用===，所以你看不到strcmp。但是它在那里，字符串比較通常需要將字符串中的每個(gè)字符與另一個(gè)字符串中的字符進(jìn)行比較，字符串比較是O(n)。要避免的一種常見JavaScript模式是字符串枚舉。但隨著TypeScript的出現(xiàn)，這應(yīng)該很容易避免，因?yàn)槊杜e默認(rèn)為整數(shù)。
以下是比較成本：
// 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
}
關(guān)于基準(zhǔn): 百分比結(jié)果表示在1秒內(nèi)完成的操作數(shù)除以最高得分案例的操作數(shù)。越高越好。
正如你所看到的，差異可能很大。這種差異并不一定是由于strcmp成本，因?yàn)橐嬗袝r(shí)可以使用字符串池并通過引用進(jìn)行比較，但這也是由于整數(shù)通常在JS引擎中通過值傳遞，而字符串總是作為指針傳遞，并且內(nèi)存訪問是昂貴的。在字符串密集的代碼中，這可能會(huì)產(chǎn)生巨大的影響。
2.避免不同的shapes
JavaScript引擎試圖通過假設(shè)對象具有特定形狀來優(yōu)化代碼，并且函數(shù)將接收相同形狀的對象。這允許它們?yōu)樵撔螤畹乃袑ο蟠鎯?chǔ)該形狀的鍵一次，并將值存儲(chǔ)在單獨(dú)的平面數(shù)組中。用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 形狀”這個(gè)詞來描述這個(gè)概念，但要注意，您可能也會(huì)發(fā)現(xiàn)“隱藏類”或“映射”用于描述它。
例如運(yùn)行時(shí)，如果下面的函數(shù)接收到兩個(gè)具有形狀{ x: number, y: number }的對象，則引擎將推測未來的對象將具有相同的形狀，并生成針對該形狀優(yōu)化的機(jī)器代碼。
function add(a, b) {
return {
x: a.x + b.x,
y: a.y + b.y,
}
}如果傳遞的對象不是形狀{ x, y }而是形狀{ y, x }，則引擎將需要撤銷其推測，并且函數(shù)將突然變得相當(dāng)慢。我要強(qiáng)調(diào)的是，V8特別有3種模式用于訪問：單態(tài)（1個(gè)形狀），多態(tài)（2-4個(gè)形狀），和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.避免使用數(shù)組/對象方法
我和其他人一樣喜歡函數(shù)式編程，但是除非你在Haskell/OCaml/Rust中工作，函數(shù)式代碼被編譯成高效的機(jī)器代碼，否則函數(shù)式總是比命令式慢。
// 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()這樣的對象方法也有類似的問題，因?yàn)樗鼈円卜峙淞烁嗟臄?shù)據(jù)，而內(nèi)存訪問是所有性能問題的根源。
4.避免代理
另一個(gè)尋找優(yōu)化收益的地方是避免任何間接來源，通過以下數(shù)據(jù)可以看出差距。
// 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 }另外一個(gè)是訪問深度嵌套對象與直接訪問的對比：
// 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.避免未命中緩存
這一點(diǎn)需要一些低級的知識(shí)，但即使在JavaScript中也有含義。從CPU的角度來看，從RAM中檢索內(nèi)存是很慢的。為了加快速度，它主要使用兩種優(yōu)化。
5.1 預(yù)取
第一個(gè)是預(yù)?。核崆矮@取更多的內(nèi)存，希望它是你需要的內(nèi)存。它會(huì)猜測你請求一個(gè)內(nèi)存地址后，你會(huì)對緊接著的內(nèi)存區(qū)域有需要。所以順序訪問數(shù)據(jù)是關(guān)鍵。在下面的例子中，我們可以觀察到以隨機(jī)順序訪問內(nèi)存的影響。
// 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使用的第二個(gè)優(yōu)化是L1/L2/L3緩存：它們就像更快的RAM，但它們也更昂貴，所以它們要小得多。它們包含RAM數(shù)據(jù)，但充當(dāng)LRU緩存。當(dāng)新的工作數(shù)據(jù)需要空間時(shí)，數(shù)據(jù)被寫回主RAM。因此，這里的關(guān)鍵是使用盡可能少的數(shù)據(jù)來將工作數(shù)據(jù)集保留在快速緩存中。在下面的例子中，我們可以觀察到破壞每個(gè)連續(xù)緩存的效果。
// 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)] }盡可能的去除每一個(gè)可以消除的數(shù)據(jù)或內(nèi)存分配。數(shù)據(jù)集越小，程序運(yùn)行的速度就越快。內(nèi)存I/O是95%程序的瓶頸。另一個(gè)好的策略是將您的工作分成塊，并確保您一次處理一個(gè)小數(shù)據(jù)集。
6.避免大型對象
如第2節(jié)所述，引擎使用固定形狀來優(yōu)化對象。然而當(dāng)對象變得太大時(shí)，引擎別無選擇，只能使用常規(guī)的散列表（如Map對象）。正如我們在第5節(jié)中看到的，緩存未命中會(huì)顯著降低性能。哈希圖很容易出現(xiàn)這種情況，因?yàn)樗鼈兊臄?shù)據(jù)通常隨機(jī)均勻地分布在它們所占用的內(nèi)存區(qū)域中。
// 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
如上所述，避免頻繁索引大型對象。最好事先將對象轉(zhuǎn)換為數(shù)組。組織數(shù)據(jù)以在模型上包含 ID 會(huì)有所幫助，因?yàn)槟梢允褂?code style="background-color: rgb(231, 243, 237); padding: 1px 3px; border-radius: 4px; overflow-wrap: break-word; text-indent: 0px; display: inline-block;">Object.values()而不必引用鍵映射來獲取ID。
7.使用eval
有一些JavaScript很難為引擎優(yōu)化，通過使用eval()或其衍生物可以進(jìn)行優(yōu)化。在這個(gè)例子中，我們可以觀察到使用eval()如何避免使用動(dòng)態(tài)對象鍵創(chuàng)建對象的成本：
// 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)
關(guān)于eval()的常見警告適用于：不要相信用戶輸入，清理傳入eval()代碼的任何內(nèi)容，不要?jiǎng)?chuàng)建任何XSS可能性。還要注意，某些環(huán)境不允許訪問eval()，例如帶有CSP的瀏覽器頁面。
8.數(shù)據(jù)結(jié)構(gòu)
我不會(huì)詳細(xì)介紹數(shù)據(jù)結(jié)構(gòu)，因?yàn)樗鼈冃枰獑为?dú)說明。但是請注意，為您的用例使用不正確的數(shù)據(jù)結(jié)構(gòu)可能會(huì)比上面的任何優(yōu)化都產(chǎn)生更大的影響。我建議你熟悉本地的，比如Map和Set，并學(xué)習(xí)鏈表，優(yōu)先級隊(duì)列，樹（RB和B+）。
作為一個(gè)快速的例子，讓我們比較一下Array.includes和Set.has在一個(gè)小列表中的表現(xiàn)：
// 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 }
}
正如你所看到的，數(shù)據(jù)結(jié)構(gòu)的選擇產(chǎn)生了非常大的影響。
最后
本文主要討論了JavaScript代碼性能優(yōu)化的技巧。許多JavaScript代碼的性能沒有達(dá)到最佳，主要是因?yàn)闆]有進(jìn)行適當(dāng)?shù)膬?yōu)化。
在優(yōu)化時(shí)要考慮性能和可讀性之間的權(quán)衡，并建議在優(yōu)化前進(jìn)行基準(zhǔn)測試。也要考慮實(shí)際的運(yùn)行環(huán)境，并使用合適的工具和方法來測試和驗(yàn)證優(yōu)化效果。希望你能學(xué)到一些有用的技巧。
