如何通过 Performance API 测量函数执行时长

云辰大大_1792

云辰大大_1792

2026-07-17

199人浏览

原创

performance api 测量函数执行时长的核心是用高精度时间戳捕获起止时刻,比 date.now() 更准且不受系统时间跳变影响;支持 performance.now() 快速单次测量和 mark()/measure() 结构化追踪,适用于调试、多阶段流程及真实用户监控。

如何通过 performance api 测量函数执行时长

用 Performance API 测量函数执行时长,核心是利用高精度时间戳捕获起止时刻。它比 Date.now() 更准、不受系统时间跳变影响,适合真实性能分析。

用 performance.now() 快速测单次执行

适用于简单函数、调试验证或轻量级监控:

  • 调用 performance.now() 获取起始时间戳(单位:毫秒,精度达微秒级)
  • 执行目标函数
  • 再次调用 performance.now() 得到结束时间戳,相减即得耗时

示例:

function calculateSum(n) {<br>  return Array.from({ length: n }, (_, i) => i).reduce((a, b) => a + b, 0);<br>}<br><br>const start = performance.now();<br>calculateSum(1e6);<br>const end = performance.now();<br>console.log(`耗时: ${(end - start).toFixed(2)} ms`);

用 mark() 和 measure() 做结构化追踪

适合多阶段流程、组件生命周期、或需长期归档的场景,结果可被 DevTools 可视化,也方便批量提取:

FinGenius
FinGenius

FinGenius是一款AI智能体工具,全球首个A股AI金融博弈智能体应用。

下载
  • 在函数前调用 performance.mark('start-task')
  • 函数执行后调用 performance.mark('end-task')
  • 用 performance.measure('task-name', 'start-task', 'end-task') 创建测量条目
  • 通过 performance.getEntriesByType('measure') 获取全部测量结果

注意:标记名需唯一;多次同名 mark 会覆盖,如需保留多个,可用时间戳拼接命名。

避免常见陷阱

  • 不要依赖 performance.timing —— 已废弃,改用 performance.getEntriesByType('navigation')[0]
  • 长期运行的应用要定期清理:performance.clearMarks() 和 performance.clearMeasures(),防止内存堆积
  • 异步函数需在回调或 await 后打结束标记,否则测的是调度开销而非实际执行
  • 单次测量易受 JIT 编译、GC 等干扰,关键路径建议重复执行并取中位数或 p95 值

结合上报做持续监控

可在用户交互后、路由切换时或错误边界中收集耗时数据:

  • 用 performance.getEntriesByName('task-name') 提取指定测量
  • 在 beforeunload 或空闲时段调用 navigator.sendBeacon() 上报
  • 字段建议包含:函数标识、耗时、设备类型、网络状态、页面路径

这样就能从真实用户行为中识别慢函数,而不是仅靠本地开发环境判断。

大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

2026.09.30

120

10

LLVM RISC-V参数配置教程
LLVM RISC-V参数配置教程

本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式,涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。

2026.09.30

100

14

LLVM IR中间表示入门指南
LLVM IR中间表示入门指南

本专题整理LLVM IR的核心概念,包括中间表示作用、模块结构、函数、基本块、SSA形式、类型系统和常见语法,帮助新手理解LLVM编译流程中的关键层。

2026.09.30

80

12

PDF转图片方法
PDF转图片方法

需要把 PDF 页面用于上传、预览、分享或图片归档时,PDF 转图片方法专题整理 JPG/PNG 格式选择、逐页导出、清晰度设置、批量下载和结果检查等流程,帮助用户稳定完成 PDF 图片化处理。

2026.09.30

60

26

PixTV AI视频生成与无限画布创作
PixTV AI视频生成与无限画布创作

PixTV专题整理AI视频与视觉内容创作相关功能使用教程,涵盖AI生图、视频生成、无限画布、多模型创作、素材管理、声音音乐及视频剪辑等功能,帮助用户快速掌握PixTV从创意到成片的完整制作方法。

2026.09.29

80

15

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

2026.09.23

280

15

Buffalo框架路由与请求处理实操指南
Buffalo框架路由与请求处理实操指南

本专题讲解Buffalo框架路由与请求处理机制,涵盖路由注册与分组、资源路由、Handler编写规范、Context上下文方法、参数绑定、中间件编写挂载、Session与Cookie读写、Flash消息及错误页面定制方法。

2026.09.23

180

15

Buffalo框架零基础入门教程
Buffalo框架零基础入门教程

本专题整理Buffalo框架入门内容,涵盖Go环境准备、buffalo CLI安装、新项目生成、目录结构说明、dev热加载启动、数据库连接配置与常见报错排查,帮助新手按约定优于配置的思路跑通第一个Buffalo框架应用。

2026.09.23

140

15

Conan创建软件包配方指南
Conan创建软件包配方指南

本专题介绍通过conanfile.py创建软件包的方法,讲解包名、版本、依赖和构建设置等基础信息,以及source、build、package、package_info等常用方法的作用及编写思路。

2026.09.22

80

12

热门下载

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

精品课程

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