JavaScript 中的 try catch 语句的性能分析

已于 2022-09-20 20:11:08 修改
阅读量520 收藏
点赞数
文章标签： javascript 前端
于 2022-09-19 22:11:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/forward_xx/article/details/126943278
版权

JavaScript 中的 try catch 语句的性能分析

由于我的上篇博客Array.prototype.forEach 方法详解提出了两种跳出 forEach 循环的方法。
但网上的博客，几乎都只提及第一种方法（try catch + throw 方法）,而第二种方法（splice + return 方法）是自己在了解了 forEach 方法的原理之后想到的。
所以我想对比一下这两种方法的性能，所以需要对比 splice 方法与 try catch 语句的性能。

//方法一：try catch + throw 方法
const arr = [1, 2, 3, 4];
try {
  arr.forEach((item) => {
    if (item === 2) {
      throw new Error(`值为${item}时跳出forEac循环`);
    }
    console.log(item); //只打印 1
  });
} catch (e) {
  console.log(e); //Error: 值为2时跳出forEac循环
}
console.log(arr); // [1, 2, 3, 4]

//方法二：splice + return 方法
//在迭代时 使用splice方法 删除数组中的元素
const arr = [1, 2, 3, 4];
let spliceArr = null;
arr.forEach((item, index) => {
  if (item === 2) {
    spliceArr = arr.splice(index); // 将 2 以后的元素全部删除 并赋值给spliceArr
    return;
  }
  console.log(item); // 1
});
arr.splice(arr.length, spliceArr.length, ...spliceArr); //将删除的元素拼接回去
console.log(arr); // [1, 2, 3, 4]

1.splice 方法的基本介绍与原理

对于 splice 方法，大家可以参考下面两篇博客。

再看了 splice 方法的源码之后，发现 splice 方法内部是调用了一次循环的。
所以如果我们简单的用大 O 表示法来分析的话：

  • 方法一：try catch + throw 的性能为 O(n)。
  • 方法二：splice + return 的性能为 O(n²)。

但参阅了相关资料后又发现 try catch 语句也是一种非常消耗性能的语句，所以我们需要对 try catch 语句进行分析。

2.try catch 语句的性能分析

对try catch 语句不熟悉的朋友，可以参考下面三篇文章。

我所使用的性能分析方法主要参考JS 中用 try catch 对代码运行的性能影响分析博客中的方法，共分了五种情况来讨论。

  • 空白组1. 无 try catch 的情况下，对数据取模1千万次耗时
  • 参照组2：在 try 内部直接执行耗时代码
  • 参照组3：在 try 内部调用拥有耗时代码的函数
  • 参照组2：在 catch 内部直接执行耗时代码
  • 参照组2：在 catch 内部调用拥有耗时代码的函数

该博客得到结果是：运行环境为 Chrome51 时，分别得到的结果为 98.2ms；1026.9ms；107.7; 1028.5ms; 105.9ms。

但与我自己所做的实验结果不同，或许是版本与环境的问题，因为现代浏览器都会对我们的代码进行优化操作，我的测试结果请见下面的内容。

2.1 运行环境：Node.js v16.16.0

Node.js的测试代码如下：

//空白组1. 无 try catch 的情况下，对数据取模1千万次耗时
!(function () {
  var t = new Date(); //耗时代码开始
  for (var i = 0; i < 100000000; i++) {
    var p = i % 2;
  }
  console.log("1:", new Date() - t); //耗时代码结束
})();

//参照组2：在 try 内部直接执行耗时代码
!(function () {
  var t = new Date(); //耗时代码开始
  try {
    for (var i = 0; i < 100000000; i++) {
      var p = i % 2;
    }
    throw new Error();
  } catch (e) {}
  console.log("2:", new Date() - t); //耗时代码结束
})();

//参照组3：在 try 内部调用拥有耗时代码的函数
!(function () {
  var t = new Date(); //耗时代码开始
  function run() {
    for (var i = 0; i < 100000000; i++) {
      var p = i % 2;
    }
  }
  try {
    run();
    throw new Error();
  } catch (e) {}
  console.log("3:", new Date() - t); //耗时代码结束
})();

//参照组4：在 catch 内部直接执行耗时代码
!(function () {
  var t = new Date(); //耗时代码开始
  try {
    throw new Error();
  } catch (e) {
    for (var i = 0; i < 100000000; i++) {
      var p = i % 2;
    }
  }
  console.log("4:", new Date() - t); //耗时代码结束
})();

//参照组5：在 catch 内部调用拥有耗时代码的函数
!(function () {
  function run() {
    for (var i = 0; i < 100000000; i++) {
      var p = i % 2;
    }
  }
  var t = new Date(); //耗时代码开始
  try {
    throw new Error();
  } catch (e) {
    run();
  }
  console.log("5:", new Date() - t); //耗时代码结束
})();

五种方法的结果：均在 60-80ms 之内，所以我推断应该是现代浏览器会对我们的代码进行优化操作而造成的，大家可以自己在本地环境运行看看。

2.2 运行环境：Chrome 版本(105.0.5195.127) 或 Microsoft Edge 版本(105.0.1343.42)

测试代码如下:

  1. 无 try catch 的情况下，对数据取模1千万次耗时**[空白组]**
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>1. 无 try catch 的情况下，对数据取模1千万次耗时[空白组]</title>
  </head>
  <body>
    <h1 id="h1"></h1>
    <script>
      //空白组1：[无 try catch 的情况下对数据取模1千万次耗时]
      !(function () {
        const h1 = document.querySelector("#h1");
        var t = new Date(); //耗时代码开始
        for (var i = 0; i < 100000000; i++) {
          var p = i % 2;
        }
        h1.innerText = `情况1:无 try catch 消耗性能为${new Date() - t}ms`; //耗时代码结束
      })();
    </script>
  </body>
</html>
  1. 在 try 内部直接执行耗时代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2.将耗时代码用 try 包围，内联耗时代码</title>
  </head>
  <body>
    <h1 id="h1"></h1>
    <script>
      //参照组2：在 try 内部直接执行耗时代码
      !(function () {
        const h1 = document.querySelector("#h1");
        var t = new Date(); //耗时代码开始
        try {
          for (var i = 0; i < 100000000; i++) {
            var p = i % 2;
          }
          throw new Error();
        } catch (e) {}
        h1.innerText = `情况2:try 内部执行消耗性能为${new Date() - t}ms`; //耗时代码结束
      })();
    </script>
  </body>
</html>
  1. 在 try 内部调用拥有耗时代码的函数
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3.将耗时代码用 try 包围，try调用耗时代码的函数</title>
  </head>
  <body>
    <h1 id="h1"></h1>
    <script>
      //参照组3：在 try 内部调用拥有耗时代码的函数
      !(function () {
        const h1 = document.querySelector("#h1");
        var t = new Date(); //耗时代码开始
        function run() {
          for (var i = 0; i < 100000000; i++) {
            var p = i % 2;
          }
        }
        try {
          run();
          throw new Error();
        } catch (e) {}
        h1.innerText = `情况3:try 内部调用消耗性能为${new Date() - t}ms`; //耗时代码结束
      })();
    </script>
  </body>
</html>
  1. 在 catch 内部直接执行耗时代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>4.在 catch 内部直接执行耗时代码</title>
  </head>
  <body>
    <h1 id="h1"></h1>
    <script>
      //参照组4：在 catch 内部直接执行耗时代码
      !(function () {
        const h1 = document.querySelector("#h1");
        var t = new Date(); //耗时代码开始
        try {
          throw new Error();
        } catch (e) {
          for (var i = 0; i < 100000000; i++) {
            var p = i % 2;
          }
        }
        h1.innerText = `情况4:catch 内部执行消耗性能为${new Date() - t}ms`; //耗时代码结束
      })();
    </script>
  </body>
</html>
  1. 在 catch 内部调用拥有耗时代码的函数
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>5.在 catch 内部调用耗时代码的函数</title>
  </head>
  <body>
    <h1 id="h1"></h1>
    <script>
      //参照组5：在 catch 内部调用拥有耗时代码的函数
      !(function () {
        const h1 = document.querySelector("#h1");
        var t = new Date(); //耗时代码开始
        function run() {
          for (var i = 0; i < 100000000; i++) {
            var p = i % 2;
          }
        }
        try {
          throw new Error();
        } catch (e) {
          run();
        }
        h1.innerText = `情况5:catch 内部调用消耗性能为${new Date() - t}ms`; //耗时代码结束
      })();
    </script>
  </body>
</html>

结果：这五种方法的结果也都差不多，首次运行时会比较耗费时间都在 100ms 以上，但重新刷新页面时耗费时间都在 60-80ms 左右，与 node.js 环境结果差不多。

3.跳出 forEach 循环的两种方法的性能对比

性能分析的代码如下：

  1. 方法一：try catch + throw 方法
//方法一：try catch + throw 方法
!(function () {
  const arr = new Array(100000).fill(0).map((item, index) => index + 1);
  console.time("testTime1"); //开始计时
  // const start = Date.now();
  try {
    arr.forEach((item) => {
      if (item === 50000) {
        throw 1;
      }
    });
  } catch (e) {}
  console.timeEnd("testTime1"); //结束计时
  // console.log("runtime:", Date.now() - start);
})();

2.方法二：splice + return 方法

//方法二：splice + return 方法
!(function () {
  const arr = new Array(100000).fill(0).map((item, index) => index + 1);
  console.time("testTime2"); //开始计时
  // const start = Date.now();
  //当数组元素过多时  会报错 RangeError: Maximum call stack size exceeded
  let spliceArr = null;
  arr.forEach((item, index) => {
    if (item === 50000) {
      spliceArr = arr.splice(index); // 将 2 以后的元素全部删除 并赋值给spliceArr
      return;
    }
  });
  arr.splice(arr.length, spliceArr.length, ...spliceArr); //将删除的元素拼接回去
  console.timeEnd("testTime2"); //结束计时
  // console.log("runtime:", Date.now() - start);
})();

结果如下：第一种方法明显优于第二种方法，但差距大小受跳出循环条件与数组大小影响，但第一种方法总体上都优于第二种。

所以大家开发时：推荐使用方法一进行跳出forEac循环，但其实我们完全可以不使用forEach方法，因为遍历的方法有很多种，且大部分性能比forEach方法好，比如：for循环。但大家还是得按照实际应用场景来选择最合适的方法，抛开场景谈性能等于耍流氓。

但是如果是面试时被问到：如何跳出forEac循环？

你要是能答出个大概，相信肯定会给面试官眼前一亮的感觉。

结语

这是我目前所了解的知识面中最好的解答，当然也有可能存在一点的误区。

所以如果对本文存在疑惑，可以去评论区进行留言，欢迎大家指出文中的错误观点。

码字不易，觉得有帮助的朋友点赞，关注走一波。

forward_xx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript中 try catch用法
10-23
JS try catch语句一般在什么情况下使用？是必须使用的吗？下面就让小编来给大家介绍一下试用心得。
JS处理代码中可能出现的错误信息:try catch finally
weixin_44818614的博客
10-23 644
js中try、catch、finally的执行规则: 首先一个常识就是，在浏览器执行JS脚本过程中，当出现脚本错误，并且你没有手动进行异常捕捉时，他会在浏览器下面出现黄色的叹号，这是正常的，这也不是最重要的，最重要的是，出错行以下的所有JS代码将中停执行，这是我们不希望看到的，所以说，对于自己写的，拿不准的脚本还是加上异常捕捉比较好。 try: 测试代码块的错误，一般把可能会出错的代码放到这里 catch：捕获处理抛出的错误。 只有try里面的代码块发生错误时，才会执行这里的代码，参数err记录着try里
js中try、catch、finally 使用
weixin_44955769的博客
11-26 3400
1、try: 语句测试代码块的错误，一般把可能会出错的代码放到这里 2、catch： 只有try里面的代码块发生错误时，才会执行这里的代码，参数err记录着try里面代码的错误信息 3、finally: 无论有无异常里面代码都会执行 4、try catch缺点： 1.try catch耗性能 　　2.try catch捕获不到异步错误 　　3.try catch可能会导致报错点更模糊** 5、执行顺序 try里面的代码报错的时候,catch里面的代码才会执行,finally里面的代码永远会执行 ca
优雅而高效的JavaScript——try...catch语句（js异常处理）
杜永康的博客
10-19 8190
除了内置的异常类型，JavaScript还允许我们创建自定义异常类型。通过创建自定义异常类型，我们可以根据自己的需求定义特定的错误类型，并在程序中抛出和捕获这些异常。要创建自定义异常类型，我们可以定义一个继承自Error的子类，并在子类中添加自定义的属性和方法。'自定义错误：' + this.message;try {throw new CustomError('这是一个定义错误');console.log('捕获到自定义错误：', error.getErrorMessage());
js 中try catch用法
m0_49016709的博客
08-11 2万+
try{ //正常执行的代码 //如果出错，抛出错误 }catch(err){ //处理错误 } 运行流程： try{…}包含块中的代码有错误，则运行catch(err){…}内的代码， 否则不运行catch(err){…}内的代码。 应用范围： 可以用来判断，你可控的错误，也就是说你很清楚知道这里是有可能”出错“的，而且你很清楚知道什么前提下会出错，你就是要故意利用报错信息来区分错误，后续的程序会解决所有的出错，让程序继续执行。 例如 var array = null; try { console.l
关于javascript try-catch的理解
zhkkky的博客
09-11 864
try-catch 是 JavaScript 处理错误的一种重要机制。try 块用来包含可能会出错的代码,catch 块用来处理 try 块中的错误。
别被骗了，try-catch语句真的会影响性能吗？
m0_64363449的博客
08-02 122
不知道从何时起，传出了这么一句话：Java中使用try catch 会严重影响性能。然而，事实真的如此么？我们对try catch 应该畏之如猛虎么？
JS中的try catch性能优化
小松鼠举栗子
05-15 1110
try catch的性能问题 最近在给项目做性能优化, 就推测JS的try catch是否会存在性能问题. 百度搜索了一下, 确实有很多相关的文章. 我索性自己做一个实验来验证一下这个猜测. 1. 不发生异常时 代码如下, 启动10万次运行, try catch 一个简单的函数执行. function doSomething() { let b = { c:1 }; return b.c; } function testTryCatch(func) { let ret =
使用 try-catch 会影响性能吗？大部分人都会答错！
java面试笔试
03-03 1342
“yes，你看着这鬼代码，竟然在 for 循环里面搞了个 try-catch，不知道try-catch有性能损耗吗？”老陈煞有其事地指着屏幕里的代码：for(inti=0;i<5000;i++){ try{ dosth }catch(Exceptione){ e.printStackTrace(); ...
JavaScript语句错误throw、try及catch实例解析
10-14
主要介绍了JavaScript语句错误throw、try及catch实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
JS中用try catch对代码运行的性能影响分析
11-30
前言 之前一直没有去研究try catch对代码运行的性能影响，只是一直停留在了感觉上，正好最近开会交流学习的时候，有人提出了相关的问题。借着周末，正好研究一番。 前端线上脚本错误的捕获方法： window.JSTracker=window.JSTracker||[]; try{ //your code }catch(e){ JSTracker.push(e); throwe;//建议将错误再次抛出，避免测试无法发现异常 } 设计实验方式 简单的设计方案也就是对比实验。 空白组1：[无 try catch 的情况下对数据取模1千万次耗时] <!DOCTYPEhtml> <html>
理解javascript中try…catch…finally
11-24
本文为大家分析了javascript中try…catch…finally的使用方法，分享给大家供大家参考，具体内容如下 稍微复杂一点点，就要用到判断语句，if else进行条件判断，话说if条件else否则，这样的判断对于写程序代码的码侬...
try-catch-overloaded:该存储库包含用于重载TryCatch语句的TS和JS库
05-03
尝试捕获超载该软件包包含重载Try / Catch语句的功能。动机添加自定义错误需要手动检查哪种类型的错误我们收到的是catch块，因为JS没有catch过载。 例如class UserNotFoundError extends Error { // ... Some ...
颠覆认知的『JavaScript』篇——18 错误信息、try_catch、严格模式、垃圾回收机制
Mr_ZJQ的博客
02-17 374
一、错误类型 1. SyntaxError 语法错误 // 变量名不规范 var 1 = 1; var 1ab = 1; // 关键字赋值 new = 5; function = 1; // 基本的语法错误 var a = 5: function 1test() {} 2.ReferenceError引用错误 //变量或者函数未被声明 test(); console.log(a); //给无法被赋值的对象赋值的时候 var a = 1 = 2; var a = 1; console..
js 中 try catch用法
xiubinxu的博客
01-12 4万+
try…catch 语句是什么？ try…catch 可以测试代码中的错误。try 部分包含需要运行的代码，而 catch 部分包含错误发生时运行的代码。 try…catch语法 try { //在此运行代码 } catch(err){ //在此处理错误 } 运行流程： try{...}包含块中的代码有错误，则运行catch(err){...}内的代码， 否则不运行catch(err){...}内的代码。 try…catch案例 var array = null; try { doc
javascript 的try{} catch(e)解释
qq_34254619的博客
02-22 260
try{ alert(a)//提示会出错,出错以后跳到cache内继续执行，不影响后面代码执行 } cache(e){//这里的e 是返回try里面出错的信息 alert(2)//输出2 } alert("aa") ------------------------------------- alert(a);//出错后影响后面语句的执行， alert(2);//不执行
关于js 中 try catch用法
前端如逆水行舟...
10-03 9615
try…catch语法，简单来说就是用来捕获异常的，我就简述一下我遇到的问题，或许你可以从我遇到的问题中明白他的作用。 当使用vuex在actions发请求时，这个接口不仅可以添加购物车数据，同时也可更新产品的数量，我就在更新产品数量的地方出现了问题，......
try catch 对性能影响
热门推荐
心中要有一片海的专栏
07-10 4万+
引言之前一直没有去研究try catch的内部机制，只是一直停留在了感觉上，正好这周五开会交流学习的时候，有人提出了相关的问题。借着周末，正好研究一番。讨论的问题当时讨论的是这样的问题： 比较下面两种try catch写法，哪一种性能更好。 for (int i = 0; i < 1000000; i++) { try { Ma
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 438
步骤很详细，直接上教程……
javascript中try catch用法
03-16
JavaScript中的try-catch用于捕获和处理代码中的异常。try块包含可能会引发异常的代码，而catch块则包含处理异常的代码。如果try块中的代码引发了异常，控制流将跳转到catch块，并执行其中的代码。在catch块中，可以访问异常对象，以便了解异常的类型和原因。try-catch语句还可以包含finally块，其中的代码无论是否引发异常都会执行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值