起因
要捕獲 JavaScript 程式碼中的異常一般會採用 try catch，不過 try catch 的使用是否是對程式碼效能產生影響呢？答案是肯定有的，但是有多少不得而知。
淘寶前端線上指令碼錯誤的捕獲方法：
|
1 2 3 4 5 6 7 |
window.JSTracker = window.JSTracker || []; try{ //your code }catch(e){ JSTracker.push(e); throw e; //建議將錯誤再次丟擲，避免測試無法發現異常 } |
設計實驗方式
簡單的設計方案也就是對比實驗。
空白組1：[無 try catch 的情況下對資料取模1千萬次耗時]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <title>1 無try catch的情況耗時</title> <script> !function() { //無try catch的情況耗時 var t = new Date(); //耗時程式碼開始 for (var i = 0; i < 100000000; i++) { var p = i % 2; } //耗時程式碼結束 document.write(new Date() - t); }(); </script> </head> <body> </body> </html> |
參照組2：[將耗時程式碼用 try 包圍，內聯耗時程式碼]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <title>2 在 try 中內聯程式碼的耗時情況</title> <script> !function() { //在 try 中內聯程式碼的耗時情況 var t = new Date(); try{ //耗時程式碼開始 for (var i = 0; i < 100000000; i++) { var p = i % 2; } //耗時程式碼結束 throw new Error(); }catch(e){ } document.write(new Date() - t); }(); </script> </head> <body> </body> </html> |
參照組3：[將耗時程式碼用 try 包圍，外聯耗時程式碼]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <title>3 在 try 中內聯程式碼的耗時情況</title> <script> !function() { function run(){ //耗時程式碼開始 for (var i = 0; i < 100000000; i++) { var p = i % 2; } //耗時程式碼結束 } //在 try 中內聯程式碼的耗時情況 var t = new Date(); try{ run(); throw new Error(); }catch(e){ } document.write(new Date() - t); }(); </script> </head> <body> </body> </html> |
參照組4：[將耗時程式碼用 catch 包圍，內聯耗時程式碼]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <title>4 在 catch 中內聯程式碼的耗時情況</title> <script> !function() { //在 catch 中內聯程式碼的耗時情況 var t = new Date(); try{ throw new Error(); }catch(e){ //耗時程式碼開始 for (var i = 0; i < 100000000; i++) { var p = i % 2; } //耗時程式碼結束 } document.write(new Date() - t); }(); </script> </head> <body> </body> </html> |
參照組5：[將耗時程式碼用 catch 包圍，外聯耗時程式碼]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <title>5 在 catch 中內聯程式碼的耗時情況</title> <script> !function() { function run(){ //耗時程式碼開始 for (var i = 0; i < 100000000; i++) { var p = i % 2; } //耗時程式碼結束 } //在 catch 中內聯程式碼的耗時情況 var t = new Date(); try{ throw new Error(); }catch(e){ run(); } document.write(new Date() - t); }(); </script> </head> <body> </body> </html> |
執行結果（只選取了 Chrome 作為示例）
| – | 不使用 try-catch | try 中耗時，內聯程式碼 | try 中耗時，外聯程式碼 | catch 中耗時，內聯程式碼 | catch 中耗時，外聯程式碼 |
|---|---|---|---|---|---|
| Chrome44 | 98.2 | 1026.9 | 107.7 | 1028.5 | 105.9 |
給出總結
- 使用 try catch 的使用無論是在 try 中的程式碼還是在 catch 中的程式碼效能消耗都是一樣的。
- 需要注意的效能消耗在於 try catch 中不要直接塞進去太多的程式碼（宣告太多的變數），最好是吧所有要執行的程式碼放在另一個 function 中，通過呼叫這個 function 來執行。
針對第二點，可以檢視 ECMA 中關於 try catch 的解釋，在程式碼進入 try catch 的時候 js引擎會拷貝當前的詞法環境，拷貝的其實就是當前 scope 下的所有的變數。
建議
在使用 try catch 的時候儘量把 try catch 放在一個相對乾淨的 scope 中，同時在 try catch 語句中也儘量保證足夠少的變數，最好通過函式呼叫方式來 try catch。
試驗中的現象解釋
測試過程中還是發現了一個疑問, 以下兩段程式碼在 Chrome 44 中執行出來的結果差距非常大，加了一句空的 try catch 之後平均為：850ms，加上之前為：140ms。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
!function() { //無 try catch 的情況耗時 var t = new Date(); //耗時程式碼開始 for (var i = 0; i < 100000000; i++) { var p = i % 2; } //耗時程式碼結束 document.write(new Date() - t); try{ }catch(e){ } }(); |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
!function() { //無 try catch 的情況耗時 var t = new Date(); //耗時程式碼開始 for (var i = 0; i < 100000000; i++) { var p = i % 2; } //耗時程式碼結束 document.write(new Date() - t); }(); |
其實原因很簡單
只要把程式碼改為這樣 耗時就降下來了：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
!function() { !function() { //無 try catch 的情況耗時 var t = new Date(); //耗時程式碼開始 for (var i = 0; i < 100000000; i++) { var p = i % 2; } //耗時程式碼結束 document.write(new Date() - t); }(); try{ }catch(e){ } }(); |