JS中用try catch对代码运行的性能影响分析
前言
之前一直没有去研究trycatch对代码运行的性能影响，只是一直停留在了感觉上，正好最近开会交流学习的时候，有人提出了相关的问题。借着周末，正好研究一番。
前端线上脚本错误的捕获方法：
window.JSTracker=window.JSTracker||[];
try{
//yourcode
}catch(e){
JSTracker.push(e);
throwe;//建议将错误再次抛出，避免测试无法发现异常
}
设计实验方式
简单的设计方案也就是对比实验。
空白组1：[无trycatch的情况下对数据取模1千万次耗时]
<!DOCTYPEhtml>
<html>
<head>
<title>1无trycatch的情况耗时</title>
<script>
!function(){
//无trycatch的情况耗时
vart=newDate();
//耗时代码开始
for(vari=0;i<100000000;i++){
varp=i%2;
}
//耗时代码结束
document.write(newDate()–t);
}();
</script>
</head>
<body>
</body>
</html>
参照组2：[将耗时代码用try包围，内联耗时代码]
<!DOCTYPEhtml>
<html>
<head>
<title>2在try中内联代码的耗时情况</title>
<script>
!function(){
//在try中内联代码的耗时情况
vart=newDate();
try{
//耗时代码开始
for(vari=0;i<100000000;i++){
varp=i%2;
}
//耗时代码结束
thrownewError();
}catch(e){
}
document.write(newDate()–t);
}();
</script>
</head>
<body>
</body>
</html>
参照组3：[将耗时代码用try包围，外联耗时代码]
<!DOCTYPEhtml>
<html>
<head>
<title>3在try中内联代码的耗时情况</title>
<script>
!function(){
functionrun(){
//耗时代码开始
for(vari=0;i<100000000;i++){
varp=i%2;
}
//耗时代码结束
}
//在try中内联代码的耗时情况
vart=newDate();
try{
run();
thrownewError();
}catch(e){
}
document.write(newDate()–t);
}();
</script>
</head>
<body>
</body>
</html>
参照组4：[将耗时代码用catch包围，内联耗时代码]
<!DOCTYPEhtml>
<html>
<head>
<title>4在catch中内联代码的耗时情况</title>
<script>
!function(){
//在catch中内联代码的耗时情况
vart=newDate();
try{
thrownewError();
}catch(e){
//耗时代码开始
for(vari=0;i<100000000;i++){
varp=i%2;
}
//耗时代码结束
}
document.write(newDate()–t);
}();
</script>
</head>
<body>
</body>
</html>
参照组5：[将耗时代码用catch包围，外联耗时代码]
<!DOCTYPEhtml>
<html>
<head>
<title>5在catch中内联代码的耗时情况</title>
<script>
!function(){
functionrun(){
//耗时代码开始
for(vari=0;i<100000000;i++){
varp=i%2;
}
//耗时代码结束
}
//在catch中内联代码的耗时情况
vart=newDate();
try{
thrownewError();
}catch(e){
run();
}
document.write(newDate()–t);
}();
</script>
</head>
<body>
</body>
</html>
运行结果（只选取了Chrome作为示例）
给出总结
使用trycatch的使用无论是在try中的代码还是在catch中的代码性能消耗都是一样的。
需要注意的性能消耗在于trycatch中不要直接塞进去太多的代码（声明太多的变量），最好是吧所有要执行的代码放在另一个function中，通过调用这个function来执行。
针对第二点，可以查看ECMA中关于trycatch的解释，在代码进入trycatch的时候js引擎会拷贝当前的词法环境，拷贝的其实就是当前scope下的所有的变量。
建议
在使用trycatch的时候尽量把trycatch放在一个相对干净的scope中，同时在trycatch语句中也尽量保证足够少的变量，最好通过函数调用方式来trycatch。
试验中的现象解释
测试过程中还是发现了一个疑问,以下两段代码在Chrome44中运行出来的结果差距非常大，加了一句空的trycatch之后平均为：850ms，加上之前为：140ms。
!function(){
//无trycatch的情况耗时
vart=newDate();
//耗时代码开始
for(vari=0;i<100000000;i++){
varp=i%2;
}
//耗时代码结束
document.write(newDate()–t);
try{
}catch(e){
}
}();
!function(){
//无trycatch的情况耗时
vart=newDate();
//耗时代码开始
for(vari=0;i<100000000;i++){
varp=i%2;
}
//耗时代码结束
document.write(newDate()–t);
}();
其实原因很简单
只要把代码改为这样耗时就降下来了：
!function(){
!function(){
//无trycatch的情况耗时
vart=newDate();
//耗时代码开始
for(vari=0;i<100000000;i++){
varp=i%2;
}
//耗时代码结束
document.write(newDate()–t);
}();
try{
}catch(e){
}
}();
总结
以上就是关于使用trycatch对代码运行性能影响的全部内容，希望本文的内容对大家学习或者使用Javascript能带来一定的帮助，如果有疑问大家可以留言交流。