谷歌 benchmark.js 新手体验 —— 从 ES3 到 ES7-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，性能优化是一个非常重要的部分。为了提高 JavaScript 程序的性能，我们需要了解那些可优化的地方并确定哪些优化策略是最适合的。但是如何知道哪些策略是最有效的呢？这时就可以使用 benchmark.js 这个库来帮助我们进行性能测试和比较。本文将介绍 benchmark.js 的基本使用方法，以及在 ES3 到 ES7 语言版本下的一些测试结果和建议。

benchmark.js 是什么？

benchmark.js 是一个基准测试库。该库可以对多个函数进行测试和比较，以确定它们之间的性能差异。它提供了一系列测试和比较模式，便于我们测试和比较不同的优化策略。该库还可以轻松地生成测试报告，以便更好地分析和理解测试结果。benchmark.js 支持在浏览器和 Node.js 端运行。

安装和使用

可以直接引入 benchmark.js：

<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/2.1.4/benchmark.min.js"></script>

首先创建一个测试套件：

var mySuite = new Benchmark.Suite;

需要测试的函数可以用 add() 方法添加到测试套件中：

mySuite.add('test', function() {
  // 你的测试代码
});

接下来运行测试：

mySuite.on('cycle', function(event) {
  console.log(String(event.target));
}).on('complete', function() {
  console.log('Fastest is ' + this.filter('fastest').map('name'));
}).run({ 'async': true });

在上述示例中，我们还使用了 on() 方法注册了两个事件处理程序。cycle 事件表示一个测试周期结束，而 complete 事件则表示整个测试完成。

ES3 到 ES7 测试

我们将测试一下以下这段代码：

-- -------------------- ---- -------
-------- ---------- -
  --- -- - ---------- -
    --- --- - ---
    --- ---- - - -- - - ---- ---- -
      --- -- ----
    -
    ------ ----
  -

  ------------------

  --- --- - ---
  --------- - -----

  --- --- - ---
  ---------------

  --- --- - -------------------
  --- ---- - ---- - --

  --- ------ - --- -- ---
  ----------------------------- -
    ------------------
  ---

  --- ------- - ---------------
  ---------- - --

  --------------------
  ---------------------

  --- -------- - -
    ------ ----
    ------ ---
  -

  --- ------------ - ----------------- ----------
  ------------------ - ----

  ----------------------
  --------------------------

  --- - - -------------------
  --- - - --------------

  ---------------
  ---------------
-

分别在 ES3、ES5、ES6 和 ES7 下进行测试。

ES3

在 ES3 下，由于没有 let 和 const 等关键字，所以需要使用 var 声明变量。此外，也不能使用模板字符串，需要使用字符串拼接的方式来生成字符串。测试结果如下：

test x 10,829,094 ops/sec ±1.82% (84 runs sampled)
test2 x 2,750,706 ops/sec ±1.23% (87 runs sampled)
test3 x 17,185,492 ops/sec ±1.39% (78 runs sampled)
Fastest is test3

可以看到，在 ES3 下，连续的字符串拼接表现最佳，而 let 和 const 等新的特性在 ES3 中并不存在。

ES5

在 ES5 下，我们可以使用 let 和 const 等关键字声明变量。此外，我们还可以使用模板字符串来生成字符串。测试结果如下：

test x 10,755,508 ops/sec ±1.63% (88 runs sampled)
test2 x 2,757,408 ops/sec ±1.85% (83 runs sampled)
test3 x 17,314,908 ops/sec ±1.33% (80 runs sampled)
Fastest is test3

在 ES5 下，新的关键字和模板字符串不能带来性能的提升。

ES6

在 ES6 下，我们可以使用箭头函数，使用解构语法，以及使用新的运算符等。测试结果如下：

test x 11,692,006 ops/sec ±1.67% (82 runs sampled)
test2 x 2,773,289 ops/sec ±1.61% (90 runs sampled)
test3 x 17,652,800 ops/sec ±1.70% (84 runs sampled)
Fastest is test3

可以看到，在 ES6 中，由于箭头函数和解构语法等新特性的引入，我们可以稍微提高一些性能。

ES7

在 ES7 中，我们可以使用更多的新特性，如 async/await 和指数运算符等。测试结果如下：

test x 11,867,991 ops/sec ±1.38% (84 runs sampled)
test2 x 2,837,436 ops/sec ±1.25% (84 runs sampled)
test3 x 18,057,329 ops/sec ±1.22% (82 runs sampled)
Fastest is test3

可以看到，在 ES7 中，新特性对性能的影响不是非常显著。因此，如果没有必要使用这些高级特性，建议在代码中避免使用它们。

总结

使用 benchmark.js 可以更好地了解代码性能，确定哪个优化策略是最适合的。在使用它时，我们还需要考虑 JavaScript 的语言版本，以及了解新特性是否对性能有影响。本文介绍了如何使用 benchmark.js 进行基准测试，并给出了在 ES3 到 ES7 中测试的结果和建议。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64a9652c48841e989459d49a