資訊專欄INFORMATION COLUMN
簡介
benchmark、基準測試、jsPerf
在 優(yōu)雅插入數(shù)組 一文中大家最多的評論就是 “能不能加個基準測試”。小二不是不喜歡加基準測試而是現(xiàn)在硬件設備的性能越來越快了，有時候一些操作不是性能問題的主要原因，當然這不是我們不寫出好代碼的理由。
書寫代碼還是應該在 優(yōu)雅易讀 和 運行性能中做出平衡，適合的場景做適合的事情。不過既然大家都提到了 基準測試 碰巧我又剛好沒有想到要寫什么那就一起了解一下 基準測試 吧。
人非圣賢孰能無過，三兩八哥常伴吾身。-- 嗯是我
測試 在中大型和和開源項目中算是 必備內(nèi)容，好測試可以在假定的場景下找到項目的錯誤幫助我們寫出質(zhì)量更好的代碼，也是協(xié)作開發(fā)中的調(diào)和劑。測試 是一門開發(fā)中的大學問不是一篇文章就能講得明白的。
Talk is cheap, Show me the code. -- Linus Torvalds
本文選擇的 基準測試 只是 測試 中一個小分支，本文簡單幫助大家涉獵一些簡單的概念和測試工具。學習后當遇到野生程序猿說出騷話：“廢話少說，放馬過來”，請抄起鍵盤打開 基準測試 工具大喊：“吾乃燕人張翼德，誰敢與我一戰(zhàn)？”。
拋硬幣拋一次硬幣就得到 出現(xiàn)正面概率是百分百 的結論顯然是錯誤的，數(shù)學老師教過我們 大數(shù)定律：“需要數(shù)據(jù)量足夠多、樣本足夠打才能下結論”。當拋均勻硬幣次數(shù)足夠多時出現(xiàn)正面概率應該無限趨近于百分五十，對照拋硬幣實驗 基準測試 一樣不能只記錄一次代碼運行時間就可以得出結果的，需要進行足夠多的次數(shù)。
嚇螃蟹科學家從籠子里抓出一只螃蟹，放在地上，沖著它大吼大叫，螃蟹被嚇得不輕，到處亂竄，慌不擇路。然后科學家把螃蟹的腿拆卸下來重復之前的步驟，繼續(xù)大吼大叫，螃蟹一動不動，非常的淡定從容，得到結論螃蟹的耳朵是長在腿上的。
這個小笑話大家應該都聽過，沒有考慮螃蟹逃跑是需要用腿。在做生物對照實驗時出現(xiàn)的三個概念 自變量 和 因變量、無關變量，控制好它們從而得到真實的結果。基準測試的影響變量可以是手機進入省電模式帶來的運行速度降低，可以是電腦正在運行無關軟件導致某一時刻測試環(huán)境不一致，也是可以是代碼初始狀態(tài)的不一致例子如下：
// 代碼一 let a = [1, 2, 3, 4]; a.push(5); // 代碼二 let b = [1, 2, 3, 4, 5, 6, 7, 8]; b = [...b, 9];
測試上面兩個代碼并不能得出誰的性能更好，因為初始數(shù)組的長度不一樣存在數(shù)組越大操作越慢的情況。
Benchmark上面簡單兩個例子幫助理解 基準測試 的一些基本要點。在開發(fā)中除了利用瀏覽器的特性來調(diào)優(yōu)代碼，有時候不同的代碼寫法也會帶來不一樣的性能表現(xiàn)。在 優(yōu)雅插入數(shù)組 中把數(shù)據(jù)插入數(shù)組尾部就介紹了四種不一樣的方法，利用哪一種寫法會使得代碼 優(yōu)雅、易懂、跑得快呢，可以使用 Benchmark 來幫助測試得到結論。
安裝npm i --save benchmark使用
add 接口添加測試代碼。
on 接口插入代碼到測試周期中。
run 運行代碼。
例子let suite = new Benchmark.Suite;
suite
.add("#1 利用數(shù)組長度進行賦值", () => {
let arr = [1, 2, 3, 4, 5];
arr[arr.length] = 6;
})
.add("#2 利用 Array.prototype.push 方法", () => {
let arr = [1, 2, 3, 4, 5];
arr.push(6);
})
.add("#3 利用 Array.prototype.concat 方法", () => {
let arr = [1, 2, 3, 4, 5];
arr = arr.concat(6);
})
.add("#4 利用 spread 運算符", () => {
let arr = [1, 2, 3, 4, 5];
arr = [...arr, 6];
})
.on("start", (event) => {
// 在整個測試運行前
console.log("把數(shù)據(jù)插入數(shù)組尾部");
})
.on("cycle", (event) => {
// 每個測試代碼運行后
console.log(String(event.target));
}).on("complete", () => {
// 測試完成后
console.log("最快方法是 " + suite.filter("fastest").map("name"));
}).run({ "async": true })
#1 利用數(shù)組長度進行賦值 x 3,590,121 ops/sec ±0.97% (87 runs sampled) #2 利用 Array.prototype.push 方法 x 15,796,478 ops/sec ±0.61% (88 runs sampled) #3 利用 Array.prototype.concat 方法 x 2,373,044 ops/sec ±1.00% (83 runs sampled) #4 利用 spread 運算符 x 2,405,217 ops/sec ±0.72% (91 runs sampled) 最快方法是 #2 利用 Array.prototype.push 方法jsPerf
A benchmarking library. As used on jsPerf.com.
在 Benchmark 倉庫中的項目簡介中提到了 jsPerf 一個基于 Benchmark 的便捷基準測試站點。使用 Github 登錄后，按照創(chuàng)建表格中的數(shù)據(jù)填寫就能生成基準測試。
基準測試 例子 在 jsPerf 中鏈接為 數(shù)據(jù)插入數(shù)組尾部，利用 jsPerf 可以很方便的進行分享（就像現(xiàn)在），還可以在不同瀏覽器中打開測試。下面對頁面名稱進行簡單翻譯方便英語不好的同學使用：
個人信息| 名詞 | 解釋 |
|---|---|
| Your details | 個人信息，可選填 |
| Name | 作者名字 |
| 作者郵箱，由于生成頭像 | |
| URL | 項目地址 |
| 名詞 | 解釋 |
|---|---|
| Test case details | 案例信息 |
| Title | 標題 |
| Slug | 網(wǎng)站 slug，會被拼接成 https://jsperf.com/slug |
| Description | 項目描述 |
| 名詞 | 解釋 |
|---|---|
| Preparation code | 預加載 |
| Preparation code HTML | 項目需要的 DOM 結構 和 引入外部腳本 |
| Define setup for all tests | 每次測試前將會執(zhí)行的操作即 Benchmark.setup 中的配置，例如初始化變量。 |
| Define teardown for all tests | 每次測試后會執(zhí)行的操作即 Benchmark.teardown 中的配置，例如清除變量。 |
如果有不需要的測試代碼框只需要放空內(nèi)容并保存就會自己刪除。
| 名詞 | 解釋 |
|---|---|
| Code snippets to compare | 需要比較的代碼段 |
| Title | 測試代碼段標題 |
| Async | 代碼段是否異步 |
| Code | 需要測試的代碼 |
| Add code snippet | 添加測試代碼 |
| Save test case | 保存 |
| 名詞 | 解釋 |
|---|---|
| Run test | 運行測試 |
| Testing in ... | 測試所在的瀏覽器及其版本、操作系統(tǒng)及其版本 |
| Ops/sec | 每秒鐘代碼執(zhí)行次數(shù)，數(shù)值越大越好 |
| You can edit these tests or add even more tests to this page by appending /edit to the URL. | 點擊該鏈接可以修改測試代碼，但是 slug 這些是改不了的 |
| Compare results of other browsers | 所有瀏覽器測試結果 |
| Chart type | 數(shù)據(jù)展示方式：條形圖、折線圖、餅圖、表格 |
| Filter | 瀏覽器環(huán)境 |
還不趕緊帶上鍵盤與野生程序員大戰(zhàn)三百回合，打滿經(jīng)驗升級飛仙成為上古程序員。一起成長
在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長。
如果您想讓更多人看到文章可以點個 點贊。
如果您想激勵小二可以到 Github 給個 小星星。
如果您想與小二更多交流添加微信 m353839115。
本文原稿來自 PushMeTop
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/102886.html
showImg(https://segmentfault.com/img/remote/1460000018734296?w=900&h=500); 簡介 可讀性、性能、Spread、Reduce 在 優(yōu)雅三連擊 中有同學提到了 可讀性 這個關鍵詞，就小二個人的觀點 在某個范圍內(nèi)使用比較常用到的小技巧，可以提升一定的可讀性，文中提到的短路運算在初始化變量是提升可讀性的，并且在很多提倡優(yōu)化if 語句...
繼上篇yii實戰(zhàn)之初見端倪，本篇將講解控制器和視圖的基礎用法。并構建一個人物列表頁面 默認控制器 默認情況下，當瀏覽器請求http://frontend.test/時，實際上訪問的是frontend/controllers/SiteController.php的actionIndex方法，我們在這個方法斷點測試下： public function actionIndex() { retur...
showImg(https://segmentfault.com/img/remote/1460000018836440); 簡介 無障礙、DOM 小細節(jié)、前端開發(fā)、a11y、Accessibility 無障礙的英文為 Accessibility 由于單詞拼寫過長往往被縮寫為 a11y 其中 11 指的是中間有11個字母。 無障礙指的是在使用過程中，不管什么類型的用戶都可以正常使用。生活中最常見的...
簡介 字符串、數(shù)字、數(shù)組、對象、時間、類型、等于 科學家發(fā)現(xiàn)，人腦中會分泌多種能讓人感到快樂、安全和成就感的物質(zhì)，這些物質(zhì)統(tǒng)稱為快樂素。通常情況下，快樂素的釋放水平很低，維持我們心情平靜。只有當我們完成了預設目標，作為獎勵，大腦才會增加快樂素的分泌，讓人感受到滿足和成功的喜悅。 這是之前看到的一篇關于 大腦獎勵機制 文章的一段話，為了要獲得獎勵我們需要有預設目標，而是每日 30 秒系列也是為了幫助...
摘要：這個周末舉行的俄羅斯世界杯決賽可謂精彩紛呈，高盧雄雞和潘帕斯雄鷹上演進球大戰(zhàn)，姆巴佩一人獨造三粒進球一戰(zhàn)成名，法國隊比送阿根廷回家，梅西再度飲恨而歸，另一邊葡萄牙比不敵烏拉圭，梅西與羅兩大超巨止步八強。 摘要： 這個周末舉行的俄羅斯世界杯1/8決賽可謂精彩紛呈，高盧雄雞和潘帕斯雄鷹上演進球大戰(zhàn)，姆巴佩一人獨造三粒進球一戰(zhàn)成名，法國隊4比3送阿根廷回家，梅西再度飲恨而歸，另一邊葡萄牙1比...
閱讀 3506·2021-11-24 11:17
閱讀 2293·2021-11-15 11:38
閱讀 3376·2021-10-14 09:42
閱讀 2949·2019-08-30 15:54
閱讀 2036·2019-08-28 18:09
閱讀 548·2019-08-26 11:48
閱讀 1639·2019-08-26 10:48
閱讀 2160·2019-08-26 10:45
