快捷導(dǎo)航

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

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

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

前言

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

前端線上腳本錯(cuò)誤的捕獲方法：

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

設(shè)計(jì)實(shí)驗(yàn)方式

簡單的設(shè)計(jì)方案也就是對(duì)比實(shí)驗(yàn)。

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

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

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

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

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

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

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

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

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

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

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

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

給出總結(jié)

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

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

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

建議

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

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

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

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

其實(shí)原因很簡單

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

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

總結(jié)

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

您可能感興趣的文章: