JS中用try catch对代码运行的性能影响分析


Posted in Javascript onDecember 26, 2016

前言

之前一直没有去研究try catch对代码运行的性能影响,只是一直停留在了感觉上,正好最近开会交流学习的时候,有人提出了相关的问题。借着周末,正好研究一番。

前端线上脚本错误的捕获方法:

window.JSTracker=window.JSTracker||[];
try{
//your code
}catch(e){
JSTracker.push(e);
throwe;//建议将错误再次抛出,避免测试无法发现异常
}

设计实验方式

简单的设计方案也就是对比实验。

空白组1:[无 try catch 的情况下对数据取模1千万次耗时]

<!DOCTYPEhtml>
<html>
<head>
<title>1无trycatch的情况耗时</title>
<script>
!function(){
//无try catch的情况耗时
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 作为示例)

? 不使用 TRY-CATCH TRY 中耗时,内联代码 TRY 中耗时,外联代码 CATCH 中耗时,内联代码 CATCH 中耗时,外联代码
Chrome51 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。

!function(){
//无 try catch 的情况耗时
vart=newDate();
//耗时代码开始
for(vari=0;i<100000000;i++){
varp=i%2;
}
//耗时代码结束
document.write(newDate()?t);
try{
}catch(e){
}
}();
!function(){
//无 try catch 的情况耗时
vart=newDate();
//耗时代码开始
for(vari=0;i<100000000;i++){
varp=i%2;
}
//耗时代码结束
document.write(newDate()?t);
}();

其实原因很简单

只要把代码改为这样 耗时就降下来了:

!function(){
!function(){
//无 try catch 的情况耗时
vart=newDate();
//耗时代码开始
for(vari=0;i<100000000;i++){
varp=i%2;
}
//耗时代码结束
document.write(newDate()?t);
}();
try{
}catch(e){
}
}();

总结

以上就是关于使用try catch对代码运行性能影响的全部内容,希望本文的内容对大家学习或者使用Javascript能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
javascript时间函数大全
Jun 30 Javascript
jQuery中:first选择器用法实例
Dec 30 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 #Javascript
Angular的$http与$location
Dec 26 #Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 #Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 #Javascript
Angular路由简单学习
Dec 26 #Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 #Javascript
Angular工具方法学习
Dec 26 #Javascript
You might like
PHP操作文件方法问答
2007/03/16 PHP
PHP实现MySQL更新记录的代码
2008/06/07 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
Python中如何获取类属性的列表
2016/12/26 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
Django URL参数Template反向解析
2020/11/24 Python
道路建设实施方案
2014/03/18 职场文书
自信主题班会
2015/08/14 职场文书
教师远程培训心得体会
2016/01/09 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
深入详解JS函数的柯里化
2021/06/09 Javascript