乐趣区

关于前端:上手JavaScript基准测试

Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~


写作背景:

咱们在开发过程中常常会遇到这样一个问题,同样的性能有很多中实现的计划,然而抉择那种计划,那种计划最优,耗时最短呢?除了从书上写的,他人嘴里说的,咱们最好是用数据来谈话,眼见为实~

基准测试:

基准测试是指通过设计迷信的测试方法、测试工具和测试零碎,实现对一类测试对象的某项性能指标进行定量的和可比照的测试。
——《百度百科》

应用 Benchmark.js:

1. 装置所须要的依赖:

{
    "benchmark": "^2.1.4",
    "chalk": "^4.1.0",
    "console-table-printer": "^2.10.0",
    "microtime": "^3.0.0",
    "ora": "^5.1.0"
}

2. 编写 benchmark 主构造:

  1. 增加测试用例
  2. 设置监听

    const Benchmark = require("benchmark");
    const suite = new Benchmark.Suite();
    const ora = require("ora");
    const chalk = require("chalk");
    const {getRows, p, addRow} = require("./utils");
    const {description} = Benchmark.platform;
    const spinner = ora();
    
    console.log(chalk.green(description));
    spinner.start(chalk.grey("Testing ..."));
    
    const cases = function (cases) {
      // TODO 增加 case
      // TODO 设置监听
      return suite;
    };
    
    module.exports = {cases,};

    留神:后续能够间接编写测试用例,不再关注主构造编写

3. 应用 benchmark 的 add 函数增加测试用例:

cases.forEach((c) => {const key = Object.keys(c)[0];
    suite.add(key, c[key]);
});

4. 设置监听来输入测试后果:

将每个测试用例的测试状况汇总后按表格模式展现反馈

suite
    .on("cycle", function (event) {spinner.succeed(chalk.green(String(event.target)));
      spinner.start(chalk.grey("Testing next case ..."));
    })
    .on("complete", function () {spinner.succeed(chalk.green("Test completed"));
      getRows(this.filter("successful")).forEach((row) => {addRow(row, row.case === this.filter("fastest").map("name")[0]);
      });
      p.printTable();});

5. 终端输入表格:

依赖 console-table-printer 库来实现终端表格的输入 hzs 列用于排序所以暗藏掉了,hz 列不分明为啥转为 Number 后也没能胜利排序

const p = new Table({
  columns: [{ name: "case", title: "测试用例"},
    {name: "hz", title: "执行次数 / 秒"},
    {name: "rme", title: "相对误差"},
    {name: "sampled", title: "总执行次数"},
    {name: "conclusion", title: "论断"},
  ],
  sort: (r1, r2) => Number(r1.hzs) - Number(r2.hzs),
  disabledColumns: ["hzs"],
});

6. 表格行数据整合:

  1. 第一列:测试用例名称
  2. 第二列:每秒执行用例次数,越高越好
  3. 第三列:绝对误差值
  4. 第四列:用例被执行的理论次数
  5. 第五列:论断,被标记 fastest 的为最优用例

    getRows: function (events) {const result = [];
     Object.keys(events).forEach((key) => {if (/^\d{0,}$/g.test(key)) {
         const {
           name,
           hz,
           stats: {sample, rme},
         } = events[key];
         const size = sample.length;
         result.push({
           case: name,
           hz: Benchmark.formatNumber(hz.toFixed(hz < 100 ? 2 : 0)),
           hzs: hz,
           rme: `\xb1${rme.toFixed(2)}%`,
           sampled: `${size} run${size == 1 ? "":"s"} sampled`,
         });
       }
     });
     return result;
      },

7. 测试用例编写:

将多分须要测试的案例代码别离装入数组后通过 run 函数来启动基准测试

require("../src")
  .cases([
    {"RegExp#test": function () {/o/.test("Hello World!");
      },
    },
    {"String#indexOf": function () {"Hello World!".indexOf("o") > -1;
      },
    },
    {"String#match": function () {!!"Hello World!".match(/o/);
      },
    },
  ])
  .run({async: true});

8. 测试后果预览

每秒执行次数越高的测试用例为最优,咱们能够看到查找字符的最优解就是应用 indexOf 函数了。你是这样做的吗?

文章源码:

  1. benchmark-javascript

其余计划:

  1. jsbench:Web 版基准测试,网站显示 Inspired by Benchmark.js, Jsperf.com and Jsfiddle.com.
  2. jsperf:应该是个老牌基准测试网站,目前是服务器 500 了,我是没能关上过,看 Github 能够本人搭建应用。

欢送关注我的公众号“前端小鑫同学”,原创技术文章第一工夫推送。

退出移动版