0

0

如何测量javascript代码性能_有哪些工具和方法【教程】

狼影

狼影

发布时间:2026-01-20 19:22:19

|

169人浏览过

|

来源于php中文网

原创

JavaScript性能需用数据验证,首选performance.now()高精度测量、console.time()快速调试、performance.mark()/measure()埋点分析,配合DevTools深入定位真实瓶颈。

如何测量javascript代码性能_有哪些工具和方法【教程】

JavaScript 代码性能不能靠感觉判断,必须用真实数据说话;console.time()performance.now() 是最轻量、最可控的起点,其他工具只是在此基础上做封装或补充。

performance.now() 做高精度单次测量

它返回以毫秒为单位的浮点数,精度远高于 Date.now()(通常精确到微秒级),且不受系统时间调整影响。适合测小段逻辑、循环内耗时、异步回调延迟等场景。

  • 必须成对使用:const start = performance.now(); → 执行目标代码 → const end = performance.now(); console.log(end - start);
  • 避免在函数外直接写 performance.now() 测量,因为 JS 引擎可能优化掉空操作;建议包裹在立即执行函数或重复调用中
  • 注意:在 iframe 或跨域 context 中,performance 可能受限(如某些 CSP 策略下 timing 属性为空)

console.time() 快速验证多个片段对比

适合开发调试阶段快速比对两段逻辑(比如不同数组遍历方式),但精度较低(通常只到毫秒),且输出依赖浏览器控制台实现,不可用于自动化或 CI。

  • 标签名必须字符串且唯一:console.time('map-vs-for');console.timeEnd('map-vs-for'); 需严格匹配
  • 不支持嵌套计时(Chrome 120+ 开始部分支持,但行为不稳定;Firefox 完全不支持)
  • 在 Node.js 中需启用 --enable-source-maps 才能显示准确行号,否则只显示 console.js

performance.mark() + performance.measure() 做可复用的性能标记

这是 Web Performance API 的核心组合,适合在大型应用中埋点、收集用户真实场景下的耗时(如“首屏渲染完成”到“按钮可点击”之间的时间)。

Quicktools Background Remover
Quicktools Background Remover

Picsart推出的图片背景移除工具

下载

立即学习Java免费学习笔记(深入)”;

  • performance.mark('start-load')performance.mark('end-parse') 是无开销的标记;真正计算发生在 performance.measure('parse-time', 'start-load', 'end-parse')
  • 标记名区分大小写,且不能含空格或特殊字符(否则抛 SyntaxError
  • 结果可通过 performance.getEntriesByType('measure') 获取,便于导出或上报;但注意该 API 在 Safari 中对 duration 字段精度有舍入(如 0.123ms 显示为 0.12ms)

浏览器 DevTools 的 Performance 面板不是“一键答案”

它能捕获完整的主线程活动(JS 执行、渲染、GC、网络),但默认录制会过滤掉短于 1ms 的任务,且采样间隔受 CPU 负载影响——你看到的“某函数耗时 8ms”,可能是 5 次调用累计,也可能是单次长任务被拆分。

  • 录制前务必勾选 Enable advanced paint instrumentation(尤其测动画帧)
  • 不要只看 Summary 视图的总时间,要展开 Main 轨道,按 Self Time 排序找真正瓶颈(比如 Array.prototype.sort 占比高,但实际是传入的比较函数里做了 DOM 查询)
  • 在低配设备上录制时,禁用 WebAssembly 解析选项,否则会因解析 wasm 字节码而严重拖慢录制速度

真正的性能瓶颈往往藏在「多次小操作叠加」或「意外触发重排/重绘」里,而不是单个函数执行久;所以别只盯着数字,要结合 performance.getEntries() 和 DevTools 的 Rendering 面板交叉验证。

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

556

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

734

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

477

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

434

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

1011

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

658

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

553

2023.09.20

Java JVM 原理与性能调优实战
Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机(JVM)的核心工作原理与性能调优方法,包括 JVM 内存结构、对象创建与回收流程、垃圾回收器(Serial、CMS、G1、ZGC)对比分析、常见内存泄漏与性能瓶颈排查,以及 JVM 参数调优与监控工具(jstat、jmap、jvisualvm)的实战使用。通过真实案例,帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

19

2026.01.20

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号