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

javascript的performance api是什么_如何测量性能?

千静吖_5638

千静吖_5638

发布时间:2025-12-14 22:52:02

|

852人浏览过

|

来源于php中文网

原创

Performance API 是浏览器原生高性能监控工具,支持微秒级精度测量代码执行、页面生命周期、资源加载、渲染指标及长任务,无需第三方库。

javascript的performance api是什么_如何测量性能?

Performance API 是浏览器提供的一套原生接口,用来精确获取页面运行时的性能数据,比如加载时间、渲染帧率、资源加载耗时、内存使用、长任务等。它不依赖第三方库,精度高(微秒级),是前端性能监控和优化的核心工具。

常用 Performance 方法和场景

最常用的是 performance.now() 和 performance.mark() 配合 performance.measure(),适合测量任意代码段执行耗时:

  • performance.now() 返回当前时刻的高精度时间戳(单位:毫秒,精度可达微秒),比 Date.now() 更准,且不受系统时间调整影响
  • performance.mark('start') 打标记,performance.mark('end') 再打一个,然后用 performance.measure('myTask', 'start', 'end') 计算两者间隔
  • 测量结果可通过 performance.getEntriesByName('myTask') 获取,返回包含 duration 的对象

获取页面整体生命周期关键时间点

performance.timing(已废弃但仍有兼容)和更现代的 performance.getEntriesByType('navigation') 可拿到导航相关的完整时间线:

  • 例如 navigationStart(导航开始)、domContentLoadedEventEnd(DOM 加载完成)、loadEventEnd(页面完全加载)等
  • 推荐用 performance.getEntriesByType('navigation')[0] 读取,字段名一致但语义更清晰,且支持多页导航记录
  • 注意:这些时间基于 performance.timeOrigin,不是绝对时间,而是相对页面创建时刻的偏移量

监控资源加载与渲染表现

用 performance.getEntriesByType('resource') 查看每个脚本、样式、图片等的加载耗时;用 performance.getEntriesByType('paint') 获取首次绘制(first-paint)和首次内容绘制(first-contentful-paint)时间:

OpenGemini Next.js Bestpractice Builder
OpenGemini Next.js Bestpractice Builder

使用固定的 Next.js/Tailwind/Prisma 技术栈构建并记录独立 SaaS 项目,仅将 FastAPI 用于 Python 工作负载,并遵循严格的架构规范。

下载

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

  • 资源条目含 startTime、duration、fetchStart、responseEnd 等,可分析 DNS、TCP、SSL、请求响应各阶段瓶颈
  • paint 类型需 Chrome 60+ 或新版 Edge/Firefox 支持,是核心 Web 指标(CWV)之一
  • 配合 performance.setResourceTimingBufferSize(500) 可扩大缓存容量,避免早期资源记录被丢弃

捕获长任务与内存信息(进阶)

通过 PerformanceObserver 监听 longtask 类型,能发现阻塞主线程超 50ms 的任务(影响交互响应);部分浏览器还支持 memory 字段(需开启 flag 或特定环境):

  • new PerformanceObserver(cb).observe({entryTypes: ['longtask']}) 可实时上报卡顿源头
  • performance.memory(非标准,仅 Chromium)提供 usedJSHeapSize 等,辅助判断内存泄漏
  • 注意:longtask 不是每毫秒上报,而是聚合后触发,适合监控而非精确计时

基本上就这些。用好 Performance API 不需要复杂封装,关键是选对时机(比如在 DOM 就绪后测渲染,加载完成后查资源),再结合 console.time() 做快速验证,就能定位大部分性能问题。

相关文章

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

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

下载

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

热门AI工具

更多
DeepSeek

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

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

WorkBuddy

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

豆包大模型

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

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

讯飞智作

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

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

相关专题

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

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

2666

2023.08.11

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

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

5119

2023.11.06

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

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

3687

2026.03.24

edge是什么浏览器
edge是什么浏览器

Edge是一款由Microsoft开发的网页浏览器,是Windows 10操作系统中默认的浏览器,其目标是提供更快、更安全、更现代化的浏览器体验。本专题为大家提供edge浏览器相关的文章、下载、课程内容,供大家免费下载体验。

2902

2023.08.21

IE浏览器自动跳转EDGE如何恢复
IE浏览器自动跳转EDGE如何恢复

ie浏览器自动跳转edge的解决办法:1、更改默认浏览器设置;2、阻止edge浏览器的自动跳转;3、更改超链接的默认打开方式;4、禁用“快速网页查看器”;5、卸载edge浏览器;6、检查第三方插件或应用程序等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2554

2024.03.05

如何解决Edge打开但没有标题的问题
如何解决Edge打开但没有标题的问题

若 Microsoft Edge 浏览器打开后无标题(窗口空白或标题栏缺失),可尝试以下方法解决: 重启 Edge:关闭所有窗口,重新启动浏览器。 重置窗口布局:右击任务栏 Edge 图标 → 选择「最大化」或「还原」。 禁用扩展:进入 edge://extensions 临时关闭插件测试。 重置浏览器设置:前往 edge://settings/reset 恢复默认配置。 更新或重装 Edge:检查最新版本,或通过控制面板修复

2972

2025.04.24

resource是什么文件
resource是什么文件

Resource文件是一种特殊类型的文件,它通常用于存储应用程序或操作系统中的各种资源信息。它们在应用程序开发中起着关键作用,并在跨平台开发和国际化方面提供支持。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

320

2023.12.20

硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

3128

2023.10.19

Linux 新手先学哪些命令
Linux 新手先学哪些命令

Linux新手命令专题汇集终端基础、文件目录操作、文本查看、软件安装和权限管理等入门文章,帮助按实际任务练习常用命令并建立命令行操作习惯。

0

2026.10.15

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习

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

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