web 页面在浏览器运行eval性能分析和优化

news2024/11/25 2:32:45

公司有个低代码老项目，里面有一些自定义脚本运行使用了大量的eval 动态运行。

分析

网上对eval 的争论也非常激烈，大部分不建议使用，一些人观点是用不好才导致问题。

eval 是否真的存在效率问题？ eval is evil

我们知道new Function 也可以实现动态运行代码，但是这样就产生了作用域问题。eval是没有作用域的。

mdn文档
在这里插入图片描述

对于安全方面，使用eval 存在漏洞不在分析范围。

试验

我们对比eval和new Function 两种动态运行js 的功能和效率

基本功能使用全局变量

      window.a = '全局变量a'
      var scriptStr = "console.log(window.a)";
      eval(scriptStr);
      let func = new Function(scriptStr);
      func();

**结果对比：**两个都能访问到，且能执行脚本

在这里插入图片描述

作用域

    function test() {
      var a = '局部变量a'
      var scriptStr = "console.log(a)";
      eval(scriptStr);
      let func = new Function(scriptStr);
      func();
    }
    test();

结果： eval 没有作用域，function 可以通过传参的方式解决这个问题
在这里插入图片描述

性能对比

遍历相同的次数，用两种方式分别执行

   function test() {

        var forStr =
          "for (let index = 0; index < 10000000; index++) { var a = 10;a = a * index;};";
        console.time("foreval");
        eval(forStr);
        console.timeEnd("foreval");
        console.time("forFunc");

        let forFunc = new Function("a",forStr);
        forFunc(a);
        console.timeEnd("forFunc");

      }

      test();