教程【免费下载链接】jstipsThis is about useful JS tips!项目地址https://gitcode.com/gh_mirrors/js/jstips点击查看免费下载本篇指南源自 jstips 開源專案的第 13 期技巧對應文件_posts/zh_TW/javascript/2016-01-13-tip-to-measure-performance-of-a-javascript-block.md教你用瀏覽器與 Node.js 內建的console.time(label)/console.timeEnd(label)快速測量一段 JavaScript 程式碼的執行耗時。讀完本文你將掌握 timer 的配對規則、輸出格式、多段程式碼對比測量的完整姿勢以及為何它只適合開發環境而不該用在正式上線的頁面。為什麼需要「測量一段程式碼」的效能在最佳化 JavaScript 之前你必須先知道瓶頸在哪裡。與其憑感覺猜測哪一段程式碼慢不如直接量測把可疑的程式碼區塊包進console.time(label)與console.timeEnd(label)之間瀏覽器 DevTools 的 Console 或 Node.js 的 stdout 就會輸出該區塊的執行時間這是 JavaScript 內建、零依賴、隨開隨用的效能診斷方式。在 jstips 專案中這類效能類型的技巧佔有一定比例例如 加速遞迴函式memoization、迴圈效能對比 等先學會用console.time建立「量測基準」才能驗證那些最佳化手法是否真的有效。console.time / console.timeEnd 基本用法console.time(label)會啟動一個以label為名稱的計時器console.timeEnd(label)則會停止對應的計時器並在 Console 印出從啟動到停止之間經過的時間預設單位為毫秒輸出格式為label: X.XXXms。基本規則如下label 必須一致console.time與console.timeEnd必須使用相同的字串 label否則無法配對、也不會輸出結果label 區分大小寫Array initialize與array initialize會被視為兩個不同的計時器計時器可同時存在多個不同的 label 可以同時啟動互不干擾Console 內部以 label 為 key 維護計時器集合重複呼叫時會重新計時同一 label 再次呼叫console.time會重新啟動計時因此可在迴圈內反覆量測輸出時機時間在console.timeEnd(label)被呼叫的當下印出同時該計時器會被移除。完整範例測量陣列初始化效能以下程式碼正是原文件中的核心範例測量「建立一個長度 100 的陣列並逐一填入物件」所需時間console.time(Array initialize); var arr new Array(100), len arr.length, i; for (i 0; i len; i) { arr[i] new Object(); }; console.timeEnd(Array initialize); // 輸出Array initialize: 0.711ms執行後 Console 會輸出類似Array initialize: 0.711ms的結果實際數值依硬體與瀏覽器而異。原文件中的輸出註解為「0.711ms」是作者在當時環境下的量測結果你可以在自己的瀏覽器 DevTools Console 或 Node.js 中直接複製貼上執行得到你自己的基準值。若要比較「不同寫法」的效能可以搭配多個 label 分別包裝// 方法一new Array 迴圈填值 console.time(approach-1); var arr new Array(100), len arr.length, i; for (i 0; i len; i) { arr[i] new Object(); } console.timeEnd(approach-1); // 方法二Array.from 搭配 map console.time(approach-2); var arr2 Array.from({ length: 100 }, function () { return new Object(); }); console.timeEnd(approach-2);在多個語系的 jstips 文件中保持一致用法這則技巧在 jstips 專案中同時收錄於多種語系內容完全一致可交叉比對英文原版_posts/en/javascript/2016-01-13-tip-to-measure-performance-of-a-javascript-block.md簡體中文版_posts/zh_CN/javascript/2016-01-13-tip-to-measure-performance-of-a-javascript-block.md西班牙文版_posts/es_ES/javascript/2016-01-13-tip-to-measure-performance-of-a-javascript-block.md從各語系文件頂部的 front mattertip-number: 13、categories: javascript可以看出這則技巧屬於該專案「每日一則 JavaScript 技巧」系列的一員文章風格遵循 POST_TEMPLATE.md 定義的「程式碼範例 說明 注意事項」結構投稿規範詳見 CONTRIBUTING_zh_TW.md。進階用法與注意事項1. 同一 label 重複量測穩定化你的數據單次測量很容易受到 JIT 編譯、背景執行緒、GC 等影響而波動。實務上通常會把待測區塊放進迴圈重複執行多次再用平均值判斷const label loop-1000-times; console.time(label); for (let round 0; round 1000; round) { // 待測程式碼區塊 } console.timeEnd(label); // 印出的是 1000 次的總耗時注意console.time累計的是整個區塊的總時間若要單次耗時需自行除以迴圈次數或改用其他基準測試工具。2. 量測非同步程式碼console.time/console.timeEnd並不會阻塞執行緒計時器由 label 配對因此可以用來粗略量測非同步流程的總耗時console.time(async-fetch); fetch(/api/data).then(function (res) { return res.json(); }).then(function (data) { console.timeEnd(async-fetch); // 輸出包含網路等待的總時間 });不過要注意console.timeEnd印出的時間包含非同步等待期間若要精確量測函式本身的 CPU 耗時仍需搭配其他 Profile 工具。3. Node.js 環境同樣適用console.time/console.timeEnd是 Web Console API 的一部分Node.js 也完整實作了相同介面寫入process.stdout。因此上述範例在 Node.js 中執行會輸出類似的Array initialize: 0.711ms結果。在 jstips 專案中也有專屬於 Node.js 的技巧例如 Node.js: 只在非 require 時執行模組你可以在伺服器端程式碼中用同樣方式做效能診斷。4. 與其他 Console 技巧搭配使用jstips 第 50 期 Helpful Console Logging Tricks 介紹了console.log結合條件中斷點、強制轉字串等除錯技巧。將這些技巧與console.time搭配可以在不修改正式程式碼邏輯的前提下完成「列印變數 量測耗時」的組合除錯流程。開發專用為何不建議在上線環境使用原文件特別提醒根據 Mozilla 的建議不應在上線production環境使用此方法僅限於開發環境。原因可以歸納為console.time的輸出屬於除錯資訊對終端使用者沒有意義在 Console 中印出大量計時資訊會拖慢頁面效能與「量測效能」的初衷背道而馳不同瀏覽器對console.time的實作與輸出格式並非完全一致結果不可作為跨環境的效能契約。正確做法是把量測程式碼放在開發建置development build中並在上線建置時移除或改用效能指標 API如performance.now()、PerformanceObserver搭配上報系統在不影響使用者體驗的前提下收集真實環境數據。小結console.time(label)console.timeEnd(label)是 JavaScript 內建、最輕量的程式碼區塊效能量測工具適合在開發階段快速定位瓶頸、驗證最佳化效果。記住三個重點label 必須成對且大小寫一致、輸出為毫秒級總耗時、只用於開發環境。搭配 jstips 專案中的其他效能技巧如 memoization、迴圈效能即可建立一套完整的 JavaScript 效能診斷流程。赞分享教程【免费下载链接】jstipsThis is about useful JS tips!项目地址https://gitcode.com/gh_mirrors/js/jstips点击查看免费下载相关推荐jstips 第 13 期用 console.time / console.timeEnd 快速测量 JavaScript 代码块性能jstips 第 13 期用 console.time / console.timeEnd 快速测量 JavaScript 代码块性能 本篇指南围绕 jsti教程jstips 13用 console.time 与 console.timeEnd 快速测量 JavaScript 代码块性能jstips 13用 console.time 与 console.timeEnd 快速测量 JavaScript 代码块性能 本指南围绕 jstips 项目教程用 console.time 与 console.timeEnd 快速测量 JavaScript 代码块性能jstips Tip 13用 console.time 与 console.timeEnd 快速测量 JavaScript 代码块性能jstips Tip 13 本篇技术指南以 js教程上一篇抖音批量下载终极指南3分钟掌握高效无水印素材提取下一篇鸣潮自动化终极指南5分钟快速上手ok-ww后台自动战斗系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考