讲师中心 微信公众号
AI工具推荐 视频效率加速

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

浅辰大大_3504

浅辰大大_3504

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

|

229人浏览过

|

来源于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 的核心组合,适合在大型应用中埋点、收集用户真实场景下的耗时(如“首屏渲染完成”到“按钮可点击”之间的时间)。

Json Repair Kit
Json Repair Kit

使用 Node.js 评估修复格式错误的 JSON,自动纠正尾随逗号、单引号、未加引号的键等常见问题,实现文件规范化。

下载

立即学习“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 面板交叉验证。

相关文章

数码产品性能查询
数码产品性能查询

该软件包括了市面上所有手机CPU,手机跑分情况,电脑CPU,电脑产品信息等等,方便需要大家查阅数码产品最新情况,了解产品特性,能够进行对比选择最具性价比的商品。

下载

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

热门AI工具

更多
墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2806

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

5579

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

3987

2026.03.24

sort排序函数用法
sort排序函数用法

sort排序函数的用法:1、对列表进行排序,默认情况下,sort函数按升序排序,因此最终输出的结果是按从小到大的顺序排列的;2、对元组进行排序,默认情况下,sort函数按元素的大小进行排序,因此最终输出的结果是按从小到大的顺序排列的;3、对字典进行排序,由于字典是无序的,因此排序后的结果仍然是原来的字典,使用一个lambda表达式作为key参数的值,用于指定排序的依据。

1138

2023.09.04

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

2278

2023.09.20

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1798

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2844

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

6164

2023.10.24

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

100

2026.10.22

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn