摘要:我們可以使用來分享你的基準測試。可以看到下的執(zhí)行速度明顯高于查看別人的測試用例我們可以通過瀏覽最新提交的項最新測試用例。擴大測試的樣本值,健全的測試執(zhí)行,都能夠起到減少誤差的作用。
贊助我以寫出更好的文章
如果您覺得文章對您有幫助,可以逐個點擊以下鏈接,類似于Google ads,不需要您付出任何費用,每天都可以來點一次噢,費用將由廣告商承擔,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...
前言前端開發(fā)中,掌握好瀏覽器的特性進行有針對性的性能調(diào)優(yōu)是一項基本工作,同時,比較不同代碼的執(zhí)行速度也是一項關(guān)鍵的工作。
比如,當我們想比較RegExp的test方法和String對象的indexOf方法查找字符串誰的速度更快的話,js代碼在不同的瀏覽器,不同的操作系統(tǒng)環(huán)境運行的效率可能是不一樣的,這就是為什么我們需要對其進行基準測試,在做基準測試方面,我們可以使用Benchmark.js和使用jsPerf(一個基于JSLitmus的基準測試庫)。我們可以使用jsPerf來分享你的基準測試。
Benchmark.js 的使用github 地址:https://github.com/bestiejs/b...
我們在很多github 開源項目中,往往都能看到benchmark文件夾,比如下面這個:
于是Google之,發(fā)現(xiàn)這是用來做基準測試的。于是乎:
首先我們在系統(tǒng)根目錄下,通過npm intsall benchmark 來安裝benchmark。該模塊會被寫入node_modules文件夾中,我們在test.js文件中通過require方法引入該模塊。
將如下代碼寫入test.js文件,該文件置于系統(tǒng)根目錄下:
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 });
然后在終端執(zhí)行node test.js 可見輸出結(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對象的indexOf方法,其中,Ops/sec 測試結(jié)果以每秒鐘執(zhí)行測試代碼的次數(shù)(Ops/sec)顯示,這個數(shù)值越大越好。除了這個結(jié)果外,同時會顯示測試過程中的統(tǒng)計誤差,以及相對最好的慢了多少(%)
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 });
輸出如下內(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需要引入如下三個文件:
jsPerf 的使用
jsPerf 提供了一個簡便的方式來創(chuàng)建和共享測試用例,并可以比較不同JavaScript代碼段的性能。jsPerf也是基于Benchmark來運行的。
打開jsPerf站點:http://jsperf.com/,先將必填的項目填了。其中,slug是短名稱,會生成一個網(wǎng)址,因此不可與別人的重復(fù)。然后在Code snippets to compare 區(qū)域填入title和用于測試的code。最后點擊save test case 完成驗證即可。瀏覽器會自動跳轉(zhuǎn)到測試頁面
Async選項框是用來測試一些異步調(diào)用的性能的,我們的代碼沒有使用異步方法,所以不必勾選。
運行測試點擊“Run tests”按鈕開始測試兩種算法的性能。建議在運行性能測試之前,關(guān)閉無關(guān)的瀏覽器頁面,關(guān)閉其他程序,退出不必要的后臺進程,以保證結(jié)果不受其他環(huán)境的影響。你也可以通過點擊個別測試用例的名字多帶帶運行這個例子
點擊該鏈接查看性能比較:http://jsperf.com/huang
jsPerf還會統(tǒng)計所有運行過這個測試用例的瀏覽器的比較結(jié)果,顯示在下方的Browserscope區(qū)域,可以通過它直觀地看出各個版本瀏覽器的性能橫向和縱向比較情況。
可以看到Firefox下的執(zhí)行速度明顯高于Chrome
查看別人的測試用例我們可以通過 http://jsperf.com/browse 瀏覽最新提交的250項最新測試用例。我們也可以使用底部的Revisions來查看不同的版本,也就是不同瀏覽器的測試用例情況。
總結(jié)John Resig 在其博文 JavaScript 基準測試的質(zhì)量 中提到,應(yīng)該盡量考慮到每個測試結(jié)果的誤差并去減小它。擴大測試的樣本值,健全的測試執(zhí)行,都能夠起到減少誤差的作用。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/85900.html
摘要:本文最早發(fā)布于,為原創(chuàng)常規(guī)方法兩種數(shù)組深拷貝,為不了影響原來的數(shù)組第一種方法常用但是有坑碰到這種情況就出問題了第二種方法使用,方法返回的結(jié)果并不一定是升序,主要目的是將重復(fù)的數(shù)字排到一起使用的方法兩種簡潔優(yōu)雅版奇技淫巧更新看到評論 本文最早發(fā)布于csdn,為原創(chuàng) 常規(guī)方法兩種 let json = arr => { let res = [], obj = {};...
摘要:原文地址地址基礎(chǔ)工具編譯類型檢查代碼分析引擎兼容性檢查器單元測試單元測試斷言庫單元測試數(shù)據(jù)模擬測試代碼格式化整潔性能測試可視化,靜態(tài)分析,復(fù)雜性,覆蓋工具優(yōu)化混淆可共享可運行的代碼編輯器在線正則表達式編輯器可視化工具創(chuàng)作公約工具可視 原文地址git地址 基礎(chǔ)工具 accounting.js async axios chance date-fns format.js immutable...
showImg(https://segmentfault.com/img/remote/1460000018771037?w=900&h=500); 簡介 benchmark、基準測試、jsPerf 在 優(yōu)雅插入數(shù)組 一文中大家最多的評論就是 能不能加個基準測試。小二不是不喜歡加基準測試而是現(xiàn)在硬件設(shè)備的性能越來越快了,有時候一些操作不是性能問題的主要原因,當然這不是我們不寫出好代碼的理由。 書寫...
摘要:我們可以用測一下具體實現(xiàn)原理,請參考文檔注意因為操作將操作數(shù)轉(zhuǎn)為,所以它不能處理超過位的數(shù)值取整,而有效整數(shù)的范圍是位。綜上所以如果要考慮壓縮代碼的大小,且明確知道數(shù)值范圍不會超過位整數(shù)的時候,可以考慮使用取整。 在處理數(shù)值的時候,獲取浮點數(shù)的整數(shù)和小數(shù)部分,是一種常見的操作,在JavaScript中有許多方法可以達到目的,但也正因為方法眾多,所以哪種方法更好,也值得我們仔細研究一番。...
閱讀 3571·2021-11-18 10:02
閱讀 1668·2021-10-12 10:12
閱讀 3076·2021-10-09 09:53
閱讀 5153·2021-09-09 09:34
閱讀 1033·2021-09-06 15:02
閱讀 2838·2021-08-05 10:02
閱讀 3250·2019-08-30 15:44
閱讀 3179·2019-08-28 18:04