使用Benchmark.js和jsPerf分析代碼性能

時間 2019-11-08

標籤使用 benchmark.js benchmark jsperf 分析代碼性能欄目 JavaScript 简体版

原文原文鏈接

贊助我以寫出更好的文章javascript

若是您以爲文章對您有幫助，能夠逐個點擊如下連接，相似於Google ads，不須要您付出任何費用，天天均可以來點一次噢，費用將由廣告商承擔，give me a cup of coffee?前端

https://app.codesponsor.io/li...vue

https://app.codesponsor.io/li...java

https://app.codesponsor.io/li...node

https://app.codesponsor.io/li...git

https://app.codesponsor.io/li...github

前言

前端開發中，掌握好瀏覽器的特性進行有針對性的性能調優是一項基本工做，同時，比較不一樣代碼的執行速度也是一項關鍵的工做。算法

好比，當咱們想比較RegExp的test方法和String對象的indexOf方法查找字符串誰的速度更快的話，js代碼在不一樣的瀏覽器，不一樣的操做系統環境運行的效率多是不同的，這就是爲何咱們須要對其進行基準測試，在作基準測試方面，咱們可使用Benchmark.js和使用jsPerf（一個基於JSLitmus的基準測試庫）。咱們可使用jsPerf來分享你的基準測試。npm

Benchmark.js 的使用

github 地址：https://github.com/bestiejs/b...瀏覽器

咱們在不少github 開源項目中，每每都能看到benchmark文件夾，好比下面這個：

因而Google之，發現這是用來作基準測試的。因而乎：

首先咱們在系統根目錄下，經過npm intsall benchmark 來安裝benchmark。該模塊會被寫入node_modules文件夾中，咱們在test.js文件中經過require方法引入該模塊。

將以下代碼寫入test.js文件，該文件置於系統根目錄下：

var Benchmark = require('benchmark');
var suite = new Benchmark.Suite;

// 添加測試
suite.add('RegExp#test', function() {
    /o/.test('Hello World!');
})
    .add('String#indexOf', function() {
        'Hello World!'.indexOf('o') > -1;
    })
// add listeners
    .on('cycle', function(event) {
        console.log(String(event.target));
    })
    .on('complete', function() {
        console.log('Fastest is ' + this.filter('fastest').pluck('name'));
    })
// run async
    .run({ 'async': true });

而後在終端執行node test.js 可見輸出結果以下：

➜  ~ git:(master) ✗ node test.js
RegExp#test x 9,847,928 ops/sec ±1.47% (83 runs sampled)
String#indexOf x 23,366,017 ops/sec ±0.91% (96 runs sampled)
Fastest is String#indexOf

結果最快的就是String對象的indexOf方法，其中，Ops/sec 測試結果以每秒鐘執行測試代碼的次數（Ops/sec）顯示，這個數值越大越好。除了這個結果外，同時會顯示測試過程當中的統計偏差，以及相對最好的慢了多少（%）

call和apply的比較

var Benchmark = require('benchmark');
var suite = new Benchmark.Suite;
var arr1 = function (str) {
    return [].slice.apply(str);
};
var str2 = function (str) {
    return [].slice.call(str);
};
// 添加測試
suite.add('arr1', function() {
    arr1('test');
})
    .add('str2', function() {
        str2('test');
    })
// add listeners
    .on('cycle', function(event) {
        console.log(String(event.target));
    })
    .on('complete', function() {
        console.log('Fastest is ' + this.filter('fastest').pluck('name'));
    })
// run async
    .run({ 'async': true });

輸出以下內容：

arr1 x 596,505 ops/sec ±1.14% (95 runs sampled)
str2 x 627,822 ops/sec ±1.27% (92 runs sampled)
Fastest is str2

本地的使用

本地使用Benchmark須要引入以下三個文件：

<script src="lodash.js"></script>
<script src="platform.js"></script>
<script src="benchmark.js"></script>

jsPerf 的使用

jsPerf 提供了一個簡便的方式來建立和共享測試用例，並能夠比較不一樣JavaScript代碼段的性能。jsPerf也是基於Benchmark來運行的。

打開jsPerf站點：http://jsperf.com/，先將必填的項目填了。其中，slug是短名稱，會生成一個網址，所以不可與別人的重複。而後在Code snippets to compare 區域填入title和用於測試的code。最後點擊save test case 完成驗證便可。瀏覽器會自動跳轉到測試頁面

Async選項框是用來測試一些異步調用的性能的，咱們的代碼沒有使用異步方法，因此沒必要勾選。