讲师中心 微信公众号

工具推荐

视频效率加速
AniShort
AniShort

AI短剧协同制作平台

Laper
Laper

剧本策划到成片协作

updream

一键生成高质量推广成片

Seko
Seko

AI短剧一键生成成片

深入 PerformanceEntry 接口:理解浏览器的性能数据模型

小磊大大_3262

小磊大大_3262

发布时间:2026-06-19 10:17:17

|

649人浏览过

|

来源于php中文网

原创

PerformanceEntry 是浏览器性能数据的核心载体,为真实可读、可筛选的实例,由浏览器自动记录或开发者打点生成,统一含 name、entryType、startTime、duration 四字段,但语义依 entryType 而异;其子类如 PerformanceNavigationTiming、PerformanceResourceTiming 等对应不同性能场景,可通过 getEntries()、getEntriesByType() 等方法获取,并受默认150条缓冲区限制。

深入 performanceentry 接口:理解浏览器的性能数据模型

PerformanceEntry 是浏览器性能数据的核心载体,不是抽象概念,而是真实可读、可筛选、可导出的性能条目实例。它不直接创建,而是由浏览器自动记录或开发者主动打点生成,所有条目统一遵循 name、entryType、startTime、duration 四个基础字段,但具体含义和附加属性取决于 entryType 类型。

PerformanceEntry 的类型与典型用途

它本身是抽象基类,实际出现的都是其子类实例,每种类型对应一类性能场景:

  • PerformanceNavigationTiming:页面导航全过程,如 reload、back_forward、prerender 等,提供 navigationStart、domContentLoadedEventEnd、loadEventEnd 等关键时间点
  • PerformanceResourceTiming:每个资源(script、img、css、fetch)的加载细节,含 connectStart、responseEnd、transferSize、encodedBodySize 等网络与传输指标
  • PerformanceMark:开发者手动标记的时间点,如 performance.mark('ui-start'),用于自定义阶段划分
  • PerformanceMeasure:基于两个 mark 计算出的耗时区间,如 performance.measure('render-time', 'ui-start', 'ui-end')
  • PerformancePaintTiming:首屏渲染关键节点,包括 first-paint、first-contentful-paint(FCP)

如何获取和筛选 PerformanceEntry 数据

浏览器默认维护一个性能时间线(performance timeline),可通过以下方式提取:

CDP浏览器大师
CDP浏览器大师

CDP浏览器大师:通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务,解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。

下载
  • performance.getEntries():返回全部条目,按 startTime 升序排列,包含 navigation、resource、mark、paint 等混合类型
  • performance.getEntriesByType(type):按 entryType 精确筛选,例如 getEntriesByType('resource') 只返回资源加载数据
  • performance.getEntriesByName(name, type?):按 name 字段匹配,支持模糊查找,常用于定位特定脚本或自定义 mark
  • PerformanceObserver:推荐用于长期监控,可监听新条目实时进入时间线,避免轮询开销

关键字段解析与常见误读

看似简单的四个基础字段,在不同 entryType 下语义差异很大,容易误用:

  • startTime:对 navigation 来说是 navigationStart 时间戳;对 resource 是 fetchStart;对 mark 是打点时刻;对 paint 是渲染发生时刻——它不是统一“开始”,而是该事件的锚点时间
  • duration:navigation 类型中 duration ≈ loadEventEnd − navigationStart;resource 类型中 duration ≈ responseEnd − fetchStart;而 mark 的 duration 恒为 0
  • name:navigation 类型中是文档 URL;resource 类型中通常是请求 URL;mark/measurement 中是开发者传入的字符串标识
  • entryType:决定对象结构,也影响后续分析逻辑。比如想查 DNS 耗时,必须选 PerformanceResourceTiming 实例,再读 domainLookupEnd − domainLookupStart

资源条目限制与内存管理

浏览器默认只保留最近 150 个 PerformanceEntry,超出后旧条目会被丢弃。这对长期运行的 SPA 或监控 SDK 构成风险:

  • setResourceTimingBufferSize(n):可增大资源类条目的缓存上限,例如 setResourceTimingBufferSize(500)
  • clearResourceTimings():清空当前已记录的所有 resource 条目,适合在页面切换或重试前重置
  • performance.clearMarks()/clearMeasures():分别清理 mark 和 measure 条目,避免污染后续测量
  • 注意:这些清理操作只影响 JavaScript 可访问的数据,不影响 DevTools 中已录制的 Performance 面板数据

相关文章

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

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

下载

相关标签:

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

热门AI工具

更多
豆包大模型

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

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

超级麦吉

一款通过数字员工协作完成调研、数据分析与文档制作的AI办公平台。

WorkBuddy

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

讯飞智作

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

DeepSeek

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

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

创客贴AI

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

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2963

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

6463

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

7330

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

7218

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

1023

2024.05.22

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

80

2026.11.06

Postman请求头Headers怎么设置
Postman请求头Headers怎么设置

围绕Postman HTTP请求头配置展开,讲解Headers选项的具体使用方式,包括Key和Value参数填写、请求头信息添加、常见Header字段设置及请求头修改方法,帮助用户解决接口调试过程中遇到的请求头配置问题。

40

2026.11.06

Postman接口请求发送教程
Postman接口请求发送教程

详细介绍Postman接口请求的创建与发送方法,涵盖GET和POST请求、URL配置、请求参数、Headers请求头、Body请求体设置以及响应结果查看,帮助用户掌握Postman接口请求的完整操作流程。

80

2026.11.06

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

60

2026.11.05

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
MDN CSS 文档与布局指南
MDN CSS 文档与布局指南

共0课时 | 0人学习

Postman安装指南
Postman安装指南

共0课时 | 0人学习

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

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