几种动态调用js函数方案的性能比较

时间:2022-10-27 20:50:40
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <script>
      function f1() {
        return 1 + 1;
      }

      function f2() {
        return 1000 + 3002 + "sxdd";
      }

      // 方案1
      console.time("t1");
      for (let i = 0; i < 10000000; i++) {
        const name = Math.random() > 0.5 ? "f1" : "f2";
        window[name]();
      }
      console.timeEnd("t1");

      // 方案2
      console.time("t2");
      for (let i = 0; i < 10000000; i++) {
        const name = Math.random() > 0.5 ? "f1" : "f2";
        switch (name) {
          case "f1":
            f1();
            break;
          case "f2":
            f1();
            break;
        }
      }
      console.timeEnd("t2");

      // 方案3
      console.time("t3");
      const map = {
        f1,
        f2
      };
      for (let i = 0; i < 10000000; i++) {
        const name = Math.random() > 0.5 ? "f1" : "f2";
        map[name]();
      }
      console.timeEnd("t3");
    </script>
  </body>
</html>

chrome:

几种动态调用js函数方案的性能比较

火狐:

几种动态调用js函数方案的性能比较

 

性能排序都是 方案2 > 方案3 > 方案1

 

简洁灵活程度的话,正好与性能相反(鱼与熊掌不可兼得) 方案1 > 方案3 > 方案2

 

不过不同浏览器内核性能差异较大,应该与浏览器内核优化有关

 

在chrome中,方案1性能极差,高性能场景慎用