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