⚡ 30 秒速记
- 核心判断：性能优化先建立用户指标与资源、主线程、渲染和网络证据，再定位最长关键路径
- 原理主线：围绕 「一、回顾页面加载过程」、「二、performance」、「三、动画帧率FPS」 建立输入、状态变化与输出之间的因果关系
- 文章范围：系统介绍了前端性能监控的核心API-Performance，详细讲解了页面加载的各个阶段、关键性能指标的获取方法及其在性能优化中的应用，帮助开发者全面理解和提升网页加载速度与用户体验。
- 边界与代价：实验室分数不等于真实用户体验，平均值也会掩盖长尾；优化一项指标可能转移成本
- 工程落地：用现场数据确定瓶颈、做最小改动、对照验证并持续监控回归
Performance API 可以从页面导航、资源加载和内存等维度采集性能数据，并结合 requestAnimationFrame 近似观察动画帧率。 performance.timing 用于拆分 DNS、连接、请求和 DOM 阶段，getEntries() 则适合定位具体的脚本、样式或图片耗时。帧率不能只看一次结果，且通过 requestAnimationFrame 计算的是近似值，会与真实渲染帧率存在误差。
这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。
版本校准： 原理文章中的代码代表特定实现与写作时间。应用到当前项目时，应先确认浏览器、框架或工具的主版本，再区分稳定的规范语义、可变化的内部实现和项目自身约束。
Performance是一个做前端性能监控离不开的API，最好在页面完全加载完成之后再使用，因为很多值必须在页面完全加载之后才能得到。最简单的办法是在window.onload事件中读取各种数据。
# 一、回顾页面加载过程
要学习这套
API的使用，先简单介绍下前端的基础知识
# 1.1 页面加载
一个页面的请求到响应再到显示出来，需要经过下面一些重要过程，当我们在浏览器输入一个
URL或者说点击一个URL开始，会出现如下流程
- 页面准备
- 重定向：在
header定义了重定向才会有这个过程，如果没有重定向，不会产生这个过程。 app cache：会先检查这个域名是否有缓存，如果有缓存就不需要DNS解析域名。这里的app是值应用程序application，不指手机app。DNS解析：把域名解析成IP，如果直接用ip地址访问，不产生这个过程。TCP连接：http协议是经过TCP来传输的，所以产生一个http请求就会有TCP connect，但是依赖于长连接，不会产生这个过程。request header：请求头信息。request body：请求体信息，比如get请求是没有请求体信息的，所以没有这个过程，这就是为什么把头跟体分开写的原因。response header：响应头信息。response body：响应体信息。- 解析
HTML结构 - 加载外部脚本和样式表文件：正常来说
JS、css都是外部加载的，当然有不正常的人啊，比如我。 - 解析并执行脚本代码
- 构建与解析
HTML DOM树：这个过程可以去了解下DOM树是怎样的就明白啦。 - 加载外部图片
- 页面加载完成，显示出来啦
