成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

biaoxiaoduan / 3751人閱讀

摘要：我們可以使用來(lái)分享你的基準(zhǔn)測(cè)試。可以看到下的執(zhí)行速度明顯高于查看別人的測(cè)試用例我們可以通過(guò)瀏覽最新提交的項(xiàng)最新測(cè)試用例。擴(kuò)大測(cè)試的樣本值，健全的測(cè)試執(zhí)行，都能夠起到減少誤差的作用。

贊助我以寫(xiě)出更好的文章

如果您覺(jué)得文章對(duì)您有幫助，可以逐個(gè)點(diǎn)擊以下鏈接，類似于Google ads，不需要您付出任何費(fèi)用，每天都可以來(lái)點(diǎn)一次噢，費(fèi)用將由廣告商承擔(dān)，give me a cup of coffee?

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

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

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

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

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

前言

前端開(kāi)發(fā)中，掌握好瀏覽器的特性進(jìn)行有針對(duì)性的性能調(diào)優(yōu)是一項(xiàng)基本工作，同時(shí)，比較不同代碼的執(zhí)行速度也是一項(xiàng)關(guān)鍵的工作。

比如，當(dāng)我們想比較RegExp的test方法和String對(duì)象的indexOf方法查找字符串誰(shuí)的速度更快的話，js代碼在不同的瀏覽器，不同的操作系統(tǒng)環(huán)境運(yùn)行的效率可能是不一樣的，這就是為什么我們需要對(duì)其進(jìn)行基準(zhǔn)測(cè)試，在做基準(zhǔn)測(cè)試方面，我們可以使用Benchmark.js和使用jsPerf（一個(gè)基于JSLitmus的基準(zhǔn)測(cè)試庫(kù)）。我們可以使用jsPerf來(lái)分享你的基準(zhǔn)測(cè)試。

Benchmark.js 的使用 
github 地址：https://github.com/bestiejs/b...

我們?cè)诤芏?b>github 開(kāi)源項(xiàng)目中，往往都能看到benchmark文件夾，比如下面這個(gè)：

于是Google之，發(fā)現(xiàn)這是用來(lái)做基準(zhǔn)測(cè)試的。于是乎：

首先我們?cè)谙到y(tǒng)根目錄下，通過(guò)npm intsall benchmark 來(lái)安裝benchmark。該模塊會(huì)被寫(xiě)入node_modules文件夾中，我們?cè)?b>test.js文件中通過(guò)require方法引入該模塊。

將如下代碼寫(xiě)入test.js文件，該文件置于系統(tǒng)根目錄下：

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

// 添加測(cè)試
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 });

然后在終端執(zhí)行node test.js 可見(jiàn)輸出結(jié)果如下：

?  ~ 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

結(jié)果最快的就是String對(duì)象的indexOf方法，其中，Ops/sec 測(cè)試結(jié)果以每秒鐘執(zhí)行測(cè)試代碼的次數(shù)（Ops/sec）顯示，這個(gè)數(shù)值越大越好。除了這個(gè)結(jié)果外，同時(shí)會(huì)顯示測(cè)試過(guò)程中的統(tǒng)計(jì)誤差，以及相對(duì)最好的慢了多少（%）

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);
};
// 添加測(cè)試
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 });

輸出如下內(nèi)容：

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需要引入如下三個(gè)文件：
jsPerf 的使用

jsPerf 提供了一個(gè)簡(jiǎn)便的方式來(lái)創(chuàng)建和共享測(cè)試用例，并可以比較不同JavaScript代碼段的性能。jsPerf也是基于Benchmark來(lái)運(yùn)行的。

打開(kāi)jsPerf站點(diǎn)：http://jsperf.com/，先將必填的項(xiàng)目填了。其中，slug是短名稱，會(huì)生成一個(gè)網(wǎng)址，因此不可與別人的重復(fù)。然后在Code snippets to compare 區(qū)域填入title和用于測(cè)試的code。最后點(diǎn)擊save test case 完成驗(yàn)證即可。瀏覽器會(huì)自動(dòng)跳轉(zhuǎn)到測(cè)試頁(yè)面

Async選項(xiàng)框是用來(lái)測(cè)試一些異步調(diào)用的性能的，我們的代碼沒(méi)有使用異步方法，所以不必勾選。

運(yùn)行測(cè)試

點(diǎn)擊“Run tests”按鈕開(kāi)始測(cè)試兩種算法的性能。建議在運(yùn)行性能測(cè)試之前，關(guān)閉無(wú)關(guān)的瀏覽器頁(yè)面，關(guān)閉其他程序，退出不必要的后臺(tái)進(jìn)程，以保證結(jié)果不受其他環(huán)境的影響。你也可以通過(guò)點(diǎn)擊個(gè)別測(cè)試用例的名字多帶帶運(yùn)行這個(gè)例子

點(diǎn)擊該鏈接查看性能比較：http://jsperf.com/huang

jsPerf還會(huì)統(tǒng)計(jì)所有運(yùn)行過(guò)這個(gè)測(cè)試用例的瀏覽器的比較結(jié)果，顯示在下方的Browserscope區(qū)域，可以通過(guò)它直觀地看出各個(gè)版本瀏覽器的性能橫向和縱向比較情況。

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

查看別人的測(cè)試用例

我們可以通過(guò) http://jsperf.com/browse 瀏覽最新提交的250項(xiàng)最新測(cè)試用例。我們也可以使用底部的Revisions來(lái)查看不同的版本，也就是不同瀏覽器的測(cè)試用例情況。

總結(jié)

John Resig 在其博文 JavaScript 基準(zhǔn)測(cè)試的質(zhì)量 中提到，應(yīng)該盡量考慮到每個(gè)測(cè)試結(jié)果的誤差并去減小它。擴(kuò)大測(cè)試的樣本值，健全的測(cè)試執(zhí)行，都能夠起到減少誤差的作用。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85900.html

相關(guān)文章

  • 最全的數(shù)組去重方法對(duì)比

    摘要：本文最早發(fā)布于，為原創(chuàng)常規(guī)方法兩種數(shù)組深拷貝，為不了影響原來(lái)的數(shù)組第一種方法常用但是有坑碰到這種情況就出問(wèn)題了第二種方法使用，方法返回的結(jié)果并不一定是升序，主要目的是將重復(fù)的數(shù)字排到一起使用的方法兩種簡(jiǎn)潔優(yōu)雅版奇技淫巧更新看到評(píng)論 本文最早發(fā)布于csdn，為原創(chuàng) 常規(guī)方法兩種 let json = arr => { let res = [], obj = {};...

    BlackHole1 評(píng)論0 收藏0

  • Top Javascript tools 2017

    摘要：原文地址地址基礎(chǔ)工具編譯類型檢查代碼分析引擎兼容性檢查器單元測(cè)試單元測(cè)試斷言庫(kù)單元測(cè)試數(shù)據(jù)模擬測(cè)試代碼格式化整潔性能測(cè)試可視化，靜態(tài)分析，復(fù)雜性，覆蓋工具優(yōu)化混淆可共享可運(yùn)行的代碼編輯器在線正則表達(dá)式編輯器可視化工具創(chuàng)作公約工具可視 原文地址git地址 基礎(chǔ)工具 accounting.js async axios chance date-fns format.js immutable...

    羅志環(huán) 評(píng)論0 收藏0

  • jsPerf初探

    摘要：在前端開(kāi)發(fā)中，解決一個(gè)問(wèn)題常常有多鐘方案可以實(shí)施。然而那種方案是最佳的。是一個(gè)解決方案對(duì)比，性能比較的平臺(tái)。進(jìn)入官網(wǎng)后，出現(xiàn)是一個(gè)表單，每個(gè)表單的作用如下用戶信息測(cè)試用列信息其中選項(xiàng)表示是否立即發(fā)布。準(zhǔn)備工作測(cè)試用列的代碼片段分析 在前端開(kāi)發(fā)中，解決一個(gè)問(wèn)題常常有多鐘方案可以實(shí)施。然而那種方案是最佳的。這就是為什么使用jsPerf的原因了。 jsPerf是一個(gè)解決方案對(duì)比，性能比較的平...

    wenyiweb 評(píng)論0 收藏0

  • 每日 30 秒 ? 誰(shuí)敢與我一戰(zhàn)

    showImg(https://segmentfault.com/img/remote/1460000018771037?w=900&h=500); 簡(jiǎn)介 benchmark、基準(zhǔn)測(cè)試、jsPerf 在 優(yōu)雅插入數(shù)組 一文中大家最多的評(píng)論就是 能不能加個(gè)基準(zhǔn)測(cè)試。小二不是不喜歡加基準(zhǔn)測(cè)試而是現(xiàn)在硬件設(shè)備的性能越來(lái)越快了，有時(shí)候一些操作不是性能問(wèn)題的主要原因，當(dāng)然這不是我們不寫(xiě)出好代碼的理由。 書(shū)寫(xiě)...

    Dionysus_go 評(píng)論0 收藏0

  • 你不知道的取數(shù)值整數(shù)部分的冷知識(shí)

    摘要：我們可以用測(cè)一下具體實(shí)現(xiàn)原理，請(qǐng)參考文檔注意因?yàn)椴僮鲗⒉僮鲾?shù)轉(zhuǎn)為，所以它不能處理超過(guò)位的數(shù)值取整，而有效整數(shù)的范圍是位。綜上所以如果要考慮壓縮代碼的大小，且明確知道數(shù)值范圍不會(huì)超過(guò)位整數(shù)的時(shí)候，可以考慮使用取整。 在處理數(shù)值的時(shí)候，獲取浮點(diǎn)數(shù)的整數(shù)和小數(shù)部分，是一種常見(jiàn)的操作，在JavaScript中有許多方法可以達(dá)到目的，但也正因?yàn)榉椒ū姸?，所以哪種方法更好，也值得我們仔細(xì)研究一番。...

    calx 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<