javascript 型別轉換之效能比較

[JeffKko]

javascript 型別轉換之效能比較

最近在思考 coding convention 和 program performance 如何取到一個最好的平衡點

通常是這樣

• 好讀的 code 會犧牲掉執行效能
• 效能好的 code 會犧牲掉易讀性

就突然想來比較一下一些js中的奇淫技巧對於效能上來說到底差多少, 於是有了這篇~

Number to String

1. Number.prototype.toString()

   function jsToString(num) {
     return num.toString()
   }

2. String()

   function jsString(num) {
     return String(num)
   }

3. plus empty string

   function plusEmptyString(num) {
     return num + ''
   }

4. es6 string template

   function es6StringTpl(num) {
    return `${num}`
   }

執行 benckmark 測試結果

jsToString x 39,846,308 ops/sec ±1.23% (39 runs sampled)
index.js:41
jsString x 99,686,491 ops/sec ±1.56% (39 runs sampled)
index.js:41
plusEmptyString x 749,016,046 ops/sec ±3.55% (37 runs sampled)
index.js:41
es6StringTpl x 748,302,252 ops/sec ±2.87% (36 runs sampled)

Number.toString() 和 String() 都是 js 原生提供的 api, 3 和 4 則是 js runtime 時的 隱晦轉型, 可以看到效能竟然差了快 20 倍！

為什麼呢 ？

• 方法1. 等於是對參數做了 Number.prototype.toString() 的方法, 每次呼叫這個方法都會放入 js engine Call Stack 裡面列隊, 在 js runtime 時查詢並執行

• 方法2. String() 則是等於直接寫一個字串, 例如 const str = String(123) 和 const str = '123' 基本上是相同的, 變數 str 都會是由 建構子 String 實例化的實體

  const str1 = String(123)
  const str2 = '123'
  
  console.log(str1.constructor === str2.constructor) // true

• 方法3, 4 則是在 js precompiler 階段就對參數進行 ToPrimitive() (內部轉換原始值的方法), 所以速度一定是最快的

String to Number

1. parseInt()

   function jsParseInt(str) {
     return parseInt(str)
   }

2. Number()

   function jsNumber(str) {
     return Number(str)
   }

3. add plus

   function addPlus(str) {
     return +str
   }

執行 benckmark 測試結果

jsParseInt x 204,876,967 ops/sec ±1.67% (38 runs sampled)
stringToNumber.js:32
jsNumber x 119,052,148 ops/sec ±0.27% (39 runs sampled)
stringToNumber.js:32
addPlus x 781,953,540 ops/sec ±1.95% (37 runs sampled)

效能由高至低分別是 3 > 1 > 2 (不過parseInt 其實不是正當拿來做嚴格轉型用的)

Number to Boolean

1. Boolean()

   function jsBoolean(num) {
     return Boolean(num)
   }

2. add plaint

   function addPlaint(num) {
     return !num
   }

3. add 2 plaint

   function addPlaint(num) {
     return !!num
   }

執行 benckmark 測試結果

jsBoolean x 740,109,686 ops/sec ±5.36% (35 runs sampled)
numberToBoolean.js:32
addPlaint x 761,570,367 ops/sec ±1.45% (38 runs sampled)
numberToBoolean.js:32
addPlaintPlaint x 749,909,994 ops/sec ±3.85% (36 runs sampled)

這邊很意外的是使用 Boolean() 來轉換布林值, 效能竟然和隱晦轉型是一樣的！

附上 bench mark 測試

參考

ToPrimitive() 詳解

效能轉換優化