教程【免费下载链接】jstipsThis is about useful JS tips!项目地址https://gitcode.com/gh_mirrors/js/jstips点击查看免费下载本篇技术指南以 jstips 仓库的 Tip #13 原文 为主体讲解如何用浏览器/Node.js 内置的console.time(label)与console.timeEnd(label)快速测量一段 JavaScript 代码的执行耗时。读完本文你将掌握这套零依赖、开箱即用的性能探测方法学会用自定义标签同时测量多个代码块并了解它在生产环境中的使用边界以及更高精度的替代方案。为什么需要快速测量一段 JS 代码在日常开发中我们经常要回答一个朴素的问题这段代码到底跑了多久比如遍历一万个元素的循环、一次复杂的数组初始化、某个高频调用函数……判断它是否需要优化前提是先有可量化的数据。最直接的办法是自己记时间var start Date.now(); // 被测代码块 var end Date.now(); console.log(end - start ms);但每次都要手写 start/end 样板代码还要操心变量名冲突。jstips 的 Tip #13 给出的方案更简洁直接使用 Console API 内置的console.time(label)和console.timeEnd(label)一条语句启动计时一条语句结束计时并自动输出结果。核心用法console.time 与 console.timeEndconsole.time(label)以label为标识启动一个计时器console.timeEnd(label)停止该计时器并把从启动到停止的毫秒数打印到控制台。两个 API 的要点如下API作用输出位置console.time(label)以 label 启动一个计时器无输出只记录起点console.timeEnd(label)停止对应计时器并打印耗时浏览器/Node 控制台格式为label: xxx ms其中label是必需参数用于在启动与结束之间建立一一对应关系。它可以是任意字符串推荐用能描述被测代码块的语义化名称例如Array initialize这样控制台输出天然可读同时支持在同一时刻并行测量多个互不干扰的代码块。完整示例测量数组初始化耗时原文档给出了一个测量数组初始化性能的完整可运行示例来源2016-01-13-tip-to-measure-performance-of-a-javascript-block.mdconsole.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); // Outputs: Array initialize: 0.711ms运行后在浏览器控制台或 Node.js 控制台会看到类似输出Array initialize: 0.711ms即先console.time(Array initialize)打点执行中间的for循环逐项为数组填充Object实例再用同名标签console.timeEnd(Array initialize)收尾。这里的耗时数值如示例中的 0.711ms是随机器性能与当前负载浮动的不必执着于精确复现——这正是测量工具要做的告诉你大概的量级。原文档还附带了 jsfiddle / codepen 在线 Demo运行后结果直接输出到浏览器控制台将上面代码粘贴到任意页面的 DevTools Console 中执行即可得到同样的效果。label 匹配规则与嵌套计时console.timeEnd必须使用与console.time完全相同的label字符串才能正确匹配。这一机制带来两个实用特性并行多块测量同一时刻可以分别启动多个不同 label 的计时器互不干扰嵌套计时可以在一个计时器内部再启动另一个计时器分别观测外层整体耗时与内层子步骤耗时。console.time(outer); console.time(step1); // 步骤一…… console.timeEnd(step1); console.time(step2); // 步骤二…… console.timeEnd(step2); console.timeEnd(outer);需要注意的是若console.timeEnd传入了一个从未启动过的 label或在未结束前重复启动同名 label行为会变得不可预期因此建议每个 label 只对应一个正在进行的计时任务。注意事项仅供开发环境使用原文档在结尾特别强调引用 Mozilla 的建议不要把console.time/console.timeEnd用在生产站点上只用于开发调试目的。原因包括计时输出依赖浏览器/Node 的 Console 实现不同环境行为与精度并不统一控制台 API 在部分生产构建如移除 console 的压缩配置下可能被删除或改写导致逻辑依赖的测量代码失效频繁调用 console 输出本身有开销会污染被测代码的真实性能。因此正确的做法是在本地开发与调试阶段用它们快速定位哪一段代码慢优化决策完成后将测量代码随调试工作一并移除。深入更高精度的测量方案console.time的输出精度与具体 Console 实现相关且结果以毫秒 几位小数展示。当需要更高时间分辨率或希望把测量结果纳入程序逻辑而不只是打印到控制台时可以从 Console API 的同一家族向外延伸console.timeLog(label)不结束计时器仅打印当前已流逝的时间适合在长任务中途做阶段性打点最后再用console.timeEnd收尾performance.now()返回以毫秒为单位的高精度时间戳亚毫秒分辨率可自行封装起止差值甚至用performance.mark()与PerformanceObserver记录命名时间点。不过它只提供读数能力起止与差值计算仍需手写样板代码这正是console.time/timeEnd胜在简洁的原因多轮测量取平均单次执行易受 JIT 预热、GC 和系统负载干扰。更稳妥的做法是把被测代码块放进循环执行多轮累计耗时后取平均值得到更接近稳态的结果。对方案本身的取舍可以概括为追求快、省事、可读用console.time/timeEnd追求精密、可编程、可自动化用performance.now()系列。在 jstips 仓库中的位置本文内容源自 jstips 仓库的 Tip #13 英文文档仓库内同时维护了多种语言版本英文2016-01-13-tip-to-measure-performance-of-a-javascript-block.md简体中文zh_CN 版本繁体中文zh_TW 版本西班牙语es_ES 版本该 Tip 在 README.md 的 Tips 列表中登记为第 13 条Measure performance of a code block元数据中tip-number: 13、tip-username: manmadareddy标注了编号与作者。每篇 Tip 遵循 POST_TEMPLATE.md 定义的 front matter 结构title、tip-number、tip-tldr、categories等正文则统一采用先给结论、再给代码、最后给注意事项的紧凑写法——本文所讲的性能测量技巧正是这一结构的典型代表。小结用console.time(label)开始计时、console.timeEnd(label)结束计时控制台自动输出形如label: 0.711ms的结果label是启动与结束匹配的关键支持并行与嵌套测量多个代码块该方案零依赖、写法极简适合开发期快速定位性能瓶颈生产环境请勿保留此类测量代码需要更高精度时改用performance.now()或引入多轮取平均的基准测试方案。掌握了这套方法你就能在几秒钟内给任意一段 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教程用 console.time 与 console.timeEnd 精确测量 JavaScript 进程耗时TIL 实战指南用 console.time 与 console.timeEnd 精确测量 JavaScript 进程耗时TIL 实战指南 导读 本文围绕 javascri文档教程知识库jstips 精读Tip 34实现异步循环——破解 setTimeout 闭包陷阱与 let 块作用域jstips 精读Tip 34实现异步循环——破解 setTimeout 闭包陷阱与 let 块作用域 导读 在 JavaScript 中把循环与 se教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考