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

biaoxiaoduan 發布于2019-08-21 10:38 / 3666人閱讀

摘要：我們可以使用來分享你的基準測試。可以看到下的執行速度明顯高于查看別人的測試用例我們可以通過瀏覽最新提交的項最新測試用例。擴大測試的樣本值，健全的測試執行，都能夠起到減少誤差的作用。

贊助我以寫出更好的文章

如果您覺得文章對您有幫助，可以逐個點擊以下鏈接，類似于Google ads，不需要您付出任何費用，每天都可以來點一次噢，費用將由廣告商承擔，give me a cup of coffee?

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

前言

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

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

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需要引入如下三個文件：

jsPerf 的使用

jsPerf 提供了一個簡便的方式來創建和共享測試用例，并可以比較不同JavaScript代碼段的性能。jsPerf也是基于Benchmark來運行的。

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

Async選項框是用來測試一些異步調用的性能的，我們的代碼沒有使用異步方法，所以不必勾選。

運行測試

點擊“Run tests”按鈕開始測試兩種算法的性能。建議在運行性能測試之前，關閉無關的瀏覽器頁面，關閉其他程序，退出不必要的后臺進程，以保證結果不受其他環境的影響。你也可以通過點擊個別測試用例的名字多帶帶運行這個例子

點擊該鏈接查看性能比較：http://jsperf.com/huang

jsPerf還會統計所有運行過這個測試用例的瀏覽器的比較結果，顯示在下方的Browserscope區域，可以通過它直觀地看出各個版本瀏覽器的性能橫向和縱向比較情況。

可以看到Firefox下的執行速度明顯高于Chrome

查看別人的測試用例

我們可以通過 http://jsperf.com/browse 瀏覽最新提交的250項最新測試用例。我們也可以使用底部的Revisions來查看不同的版本，也就是不同瀏覽器的測試用例情況。

總結

John Resig 在其博文 JavaScript 基準測試的質量中提到，應該盡量考慮到每個測試結果的誤差并去減小它。擴大測試的樣本值，健全的測試執行，都能夠起到減少誤差的作用。

GPU云服務器云服務器 jsPerf 代碼性能提高代碼性能性能分析

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85900.html

最全的數組去重方法對比

摘要：本文最早發布于，為原創常規方法兩種數組深拷貝，為不了影響原來的數組第一種方法常用但是有坑碰到這種情況就出問題了第二種方法使用，方法返回的結果并不一定是升序，主要目的是將重復的數字排到一起使用的方法兩種簡潔優雅版奇技淫巧更新看到評論本文最早發布于csdn，為原創常規方法兩種 let json = arr => { let res = [], obj = {};...

BlackHole1 2019-08-19 18:44 評論0 收藏0
Top Javascript tools 2017

摘要：原文地址地址基礎工具編譯類型檢查代碼分析引擎兼容性檢查器單元測試單元測試斷言庫單元測試數據模擬測試代碼格式化整潔性能測試可視化，靜態分析，復雜性，覆蓋工具優化混淆可共享可運行的代碼編輯器在線正則表達式編輯器可視化工具創作公約工具可視原文地址git地址基礎工具 accounting.js async axios chance date-fns format.js immutable...

羅志環 2019-08-22 11:13 評論0 收藏0
jsPerf初探

摘要：在前端開發中，解決一個問題常常有多鐘方案可以實施。然而那種方案是最佳的。是一個解決方案對比，性能比較的平臺。進入官網后，出現是一個表單，每個表單的作用如下用戶信息測試用列信息其中選項表示是否立即發布。準備工作測試用列的代碼片段分析在前端開發中，解決一個問題常常有多鐘方案可以實施。然而那種方案是最佳的。這就是為什么使用jsPerf的原因了。 jsPerf是一個解決方案對比，性能比較的平...

wenyiweb 2019-08-21 12:29 評論0 收藏0
每日 30 秒 ? 誰敢與我一戰

showImg(https://segmentfault.com/img/remote/1460000018771037?w=900&h=500); 簡介 benchmark、基準測試、jsPerf 在優雅插入數組一文中大家最多的評論就是能不能加個基準測試。小二不是不喜歡加基準測試而是現在硬件設備的性能越來越快了，有時候一些操作不是性能問題的主要原因，當然這不是我們不寫出好代碼的理由。書寫...

Dionysus_go 2019-08-23 16:18 評論0 收藏0
你不知道的取數值整數部分的冷知識

摘要：我們可以用測一下具體實現原理，請參考文檔注意因為操作將操作數轉為，所以它不能處理超過位的數值取整，而有效整數的范圍是位。綜上所以如果要考慮壓縮代碼的大小，且明確知道數值范圍不會超過位整數的時候，可以考慮使用取整。在處理數值的時候，獲取浮點數的整數和小數部分，是一種常見的操作，在JavaScript中有許多方法可以達到目的，但也正因為方法眾多，所以哪種方法更好，也值得我們仔細研究一番。...

calx 2019-08-26 10:31 評論0 收藏0