JavaScript代碼優(yōu)化技巧

作者：南城 2024-09-14 11:23:19

本文主要討論了JavaScript代碼性能優(yōu)化的技巧。許多JavaScript代碼的性能沒有達(dá)到最佳，主要是因?yàn)闆]有進(jìn)行適當(dāng)?shù)膬?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)測(cè)試。如果一個(gè)函數(shù)只代表了實(shí)際運(yùn)行時(shí)間的一小部分，那么花幾個(gè)小時(shí)對(duì)函數(shù)進(jìn)行微優(yōu)化以使其運(yùn)行速度提高100倍是毫無意義的。如果要進(jìn)行優(yōu)化，第一步也是最重要的一步是基準(zhǔn)測(cè)試。

我已經(jīng)為所有的場(chǎ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è)對(duì)象具有特定形狀來優(yōu)化代碼，并且函數(shù)將接收相同形狀的對(duì)象。這允許它們?yōu)樵撔螤畹乃袑?duì)象存儲(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 }的對(duì)象，則引擎將推測(cè)未來的對(duì)象將具有相同的形狀，并生成針對(duì)該形狀優(yōu)化的機(jī)器代碼。

function add(a, b) {
  return {
    x: a.x + b.x,
    y: a.y + b.y,
  }
}

如果傳遞的對(duì)象不是形狀{ x, y }而是形狀{ y, x }，則引擎將需要撤銷其推測(cè)，并且函數(shù)將突然變得相當(dāng)慢。我要強(qiáng)調(diào)的是，V8特別有3種模式用于訪問：?jiǎn)螒B(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ù)組/對(duì)象方法

我和其他人一樣喜歡函數(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()這樣的對(duì)象方法也有類似的問題，因?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è)是訪問深度嵌套對(duì)象與直接訪問的對(duì)比：

// 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)需要一些低級(jí)的知識(shí)，但即使在JavaScript中也有含義。從CPU的角度來看，從RAM中檢索內(nèi)存是很慢的。為了加快速度，它主要使用兩種優(yōu)化。

5.1 預(yù)取

第一個(gè)是預(yù)取：它提前獲取更多的內(nèi)存，希望它是你需要的內(nèi)存。它會(huì)猜測(cè)你請(qǐng)求一個(gè)內(nèi)存地址后，你會(huì)對(duì)緊接著的內(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.避免大型對(duì)象

如第2節(jié)所述，引擎使用固定形狀來優(yōu)化對(duì)象。然而當(dāng)對(duì)象變得太大時(shí)，引擎別無選擇，只能使用常規(guī)的散列表（如Map對(duì)象）。正如我們?cè)诘?節(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 })

我們還可以觀察到性能如何隨著對(duì)象大小的增加而不斷下降：

// setup:
const USERS_LENGTH = 100_000

如上所述，避免頻繁索引大型對(duì)象。最好事先將對(duì)象轉(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)對(duì)象鍵創(chuàng)建對(duì)象的成本：

// 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ú)說明。但是請(qǐng)注意，為您的用例使用不正確的數(shù)據(jù)結(jié)構(gòu)可能會(huì)比上面的任何優(yōu)化都產(chǎn)生更大的影響。我建議你熟悉本地的，比如Map和Set，并學(xué)習(xí)鏈表，優(yōu)先級(jí)隊(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)測(cè)試。也要考慮實(shí)際的運(yùn)行環(huán)境，并使用合適的工具和方法來測(cè)試和驗(yàn)證優(yōu)化效果。希望你能學(xué)到一些有用的技巧。

責(zé)任編輯：武曉燕來源：南城大前端

JavaScript 優(yōu)化性能