快捷導(dǎo)航

JS中用try catch對代碼運(yùn)行的性能影響分析

更新時間：2016年12月26日 15:36:20 作者：strivescript

要捕獲JavaScript代碼中的異常一般會采用 try catch，不過try catch的使用是否是對代碼性能產(chǎn)生影響呢？答案是肯定有的，但是有多少不得而知。下面這篇文章就給大家詳細(xì)介紹了在JS中用try catch對代碼運(yùn)行的性能影響，有需要的朋友們可以參考借鑒。

前言

之前一直沒有去研究try catch對代碼運(yùn)行的性能影響，只是一直停留在了感覺上，正好最近開會交流學(xué)習(xí)的時候，有人提出了相關(guān)的問題。借著周末，正好研究一番。

前端線上腳本錯誤的捕獲方法：

window.JSTracker=window.JSTracker||[];
try{
//your code
}catch(e){
JSTracker.push(e);
throwe;//建議將錯誤再次拋出，避免測試無法發(fā)現(xiàn)異常
}

設(shè)計實驗方式

簡單的設(shè)計方案也就是對比實驗。

空白組1：[無 try catch 的情況下對數(shù)據(jù)取模1千萬次耗時]

<!DOCTYPEhtml>
<html>
<head>
<title>1無trycatch的情況耗時</title>
<script>
!function(){
//無try catch的情況耗時
vart=newDate();
//耗時代碼開始
for(vari=0;i<100000000;i++){
varp=i%2;
}
//耗時代碼結(jié)束
document.write(newDate()–t);
}();
</script>
</head>
<body>
</body>
</html>

參照組2：[將耗時代碼用 try 包圍，內(nèi)聯(lián)耗時代碼]

<!DOCTYPEhtml>
<html>
<head>
<title>2在try中內(nèi)聯(lián)代碼的耗時情況</title>
<script>
!function(){
//在 try 中內(nèi)聯(lián)代碼的耗時情況
vart=newDate();
try{
//耗時代碼開始
for(vari=0;i<100000000;i++){
varp=i%2;
}
//耗時代碼結(jié)束
thrownewError();
}catch(e){
}
document.write(newDate()–t);
}();
</script>
</head>
<body>
</body>
</html>

參照組3：[將耗時代碼用 try 包圍，外聯(lián)耗時代碼]

<!DOCTYPEhtml>
<html>
<head>
<title>3在try中內(nèi)聯(lián)代碼的耗時情況</title>
<script>
!function(){
functionrun(){
//耗時代碼開始
for(vari=0;i<100000000;i++){
varp=i%2;
}
//耗時代碼結(jié)束
}
//在 try 中內(nèi)聯(lián)代碼的耗時情況
vart=newDate();
try{
run();
thrownewError();
}catch(e){
}
document.write(newDate()–t);
}();
</script>
</head>
<body>
</body>
</html>

參照組4：[將耗時代碼用 catch 包圍，內(nèi)聯(lián)耗時代碼]

<!DOCTYPEhtml>
<html>
<head>
<title>4在catch中內(nèi)聯(lián)代碼的耗時情況</title>
<script>
!function(){
//在 catch 中內(nèi)聯(lián)代碼的耗時情況
vart=newDate();
try{
thrownewError();
}catch(e){
//耗時代碼開始
for(vari=0;i<100000000;i++){
varp=i%2;
}
//耗時代碼結(jié)束
}
document.write(newDate()–t);
}();
</script>
</head>
<body>
</body>
</html>

參照組5：[將耗時代碼用 catch 包圍，外聯(lián)耗時代碼]

<!DOCTYPEhtml>
<html>
<head>
<title>5在catch中內(nèi)聯(lián)代碼的耗時情況</title>
<script>
!function(){
functionrun(){
//耗時代碼開始
for(vari=0;i<100000000;i++){
varp=i%2;
}
//耗時代碼結(jié)束
}
//在 catch 中內(nèi)聯(lián)代碼的耗時情況
vart=newDate();
try{
thrownewError();
}catch(e){
run();
}
document.write(newDate()–t);
}();
</script>
</head>
<body>
</body>
</html>

運(yùn)行結(jié)果（只選取了 Chrome 作為示例）

–	不使用 TRY-CATCH	TRY 中耗時，內(nèi)聯(lián)代碼	TRY 中耗時，外聯(lián)代碼	CATCH 中耗時，內(nèi)聯(lián)代碼	CATCH 中耗時，外聯(lián)代碼
Chrome51	98.2	1026.9	107.7	1028.5	105.9

給出總結(jié)

使用 try catch 的使用無論是在 try 中的代碼還是在 catch 中的代碼性能消耗都是一樣的。

需要注意的性能消耗在于 try catch 中不要直接塞進(jìn)去太多的代碼（聲明太多的變量），最好是吧所有要執(zhí)行的代碼放在另一個 function 中，通過調(diào)用這個 function 來執(zhí)行。

針對第二點，可以查看 ECMA 中關(guān)于 try catch 的解釋，在代碼進(jìn)入 try catch 的時候 js引擎會拷貝當(dāng)前的詞法環(huán)境，拷貝的其實就是當(dāng)前 scope 下的所有的變量。

建議

在使用 try catch 的時候盡量把 try catch 放在一個相對干凈的 scope 中，同時在 try catch 語句中也盡量保證足夠少的變量，最好通過函數(shù)調(diào)用方式來 try catch。

試驗中的現(xiàn)象解釋

測試過程中還是發(fā)現(xiàn)了一個疑問, 以下兩段代碼在 Chrome 44 中運(yùn)行出來的結(jié)果差距非常大，加了一句空的 try catch 之后平均為：850ms，加上之前為：140ms。

!function(){
//無 try catch 的情況耗時
vart=newDate();
//耗時代碼開始
for(vari=0;i<100000000;i++){
varp=i%2;
}
//耗時代碼結(jié)束
document.write(newDate()–t);
try{
}catch(e){
}
}();
!function(){
//無 try catch 的情況耗時
vart=newDate();
//耗時代碼開始
for(vari=0;i<100000000;i++){
varp=i%2;
}
//耗時代碼結(jié)束
document.write(newDate()–t);
}();

其實原因很簡單

只要把代碼改為這樣耗時就降下來了：

!function(){
!function(){
//無 try catch 的情況耗時
vart=newDate();
//耗時代碼開始
for(vari=0;i<100000000;i++){
varp=i%2;
}
//耗時代碼結(jié)束
document.write(newDate()–t);
}();
try{
}catch(e){
}
}();

總結(jié)

以上就是關(guān)于使用try catch對代碼運(yùn)行性能影響的全部內(nèi)容，希望本文的內(nèi)容對大家學(xué)習(xí)或者使用Javascript能帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: