1、生命周期
这张图是一个典型的资源加载和页面加载时间线图，展示了浏览器从开始导航到页面完全加载的各个阶段及其相应的事件。以下是对各个阶段和相关事件的详细分析：
1. Navigation Start
- startTime：页面加载开始的时间戳。
2. Prompt for Unload
- 处理卸载事件的阶段。
3. Redirect (重定向)
- redirectStart：重定向开始的时间戳。
- redirectEnd：重定向结束的时间戳。
4. AppCache
- 应用程序缓存阶段，浏览器检查是否有可用的缓存资源。
5. DNS (域名解析)
- domainLookupStart：DNS 查询开始的时间戳。
- domainLookupEnd：DNS 查询结束的时间戳。
6. TCP (传输层连接)
- connectStart：TCP 连接开始的时间戳。
- secureConnectionStart：HTTPS 连接开始安全握手的时间戳。
- connectEnd：TCP 连接结束的时间戳。
7. Request (请求)
- requestStart：浏览器向服务器发出请求的时间戳。
8. Response (响应)
- responseStart：服务器响应开始的时间戳（即开始接收响应数据）。
- responseEnd：服务器响应结束的时间戳（即完全接收响应数据）。
9. Processing (处理)
- domInteractive：DOM 结构已经被完全解析的时间戳，文档处于可交互状态。
- domContentLoadedEventStart：
DOMContentLoaded事件开始的时间戳。 - domContentLoadedEventEnd：
DOMContentLoaded事件结束的时间戳。 - domComplete：DOM 解析完成的时间戳。
10. Load (加载)
- loadEventStart：
load事件开始的时间戳。 - loadEventEnd：
load事件结束的时间戳。
关键事件与阶段的解释
- 重定向阶段：如果页面经历了重定向，则会记录重定向的开始和结束时间。
- AppCache 阶段：浏览器检查是否有缓存的资源可以使用。
- DNS 阶段：浏览器解析域名，获取 IP 地址。
- TCP 阶段：浏览器与服务器建立 TCP 连接，如果是 HTTPS，还包括安全连接的建立。
- 请求阶段：浏览器向服务器发出请求。
- 响应阶段：浏览器接收服务器的响应数据。
- 处理阶段：浏览器处理接收到的 HTML，构建 DOM 树，触发相关事件。
- 加载阶段：所有资源（包括图片、样式等）加载完成，触发
load事件。
资源计时（Resource Timing）
- 提供了从开始加载到各个关键点的时间信息，用于分析页面加载性能。
- 各种事件（如
redirectStart、domainLookupStart、connectStart等）用于标记资源加载过程中的重要时间节点。
2、关注指标
- FP （首次绘制）： 即第一个像素绘制的时间点，FP时间越短表明用户越快能看见页面的初步内容。
- FCP(首次内容绘制)：即第一个dom被渲染的时间点。FCP时间越短用户能够越快的看见有效内容。
- LCP(最大内容绘制)：页面中最大的图片、视频、文本块等元素。该指标直接影响用户对网站加载速度的感官。
- TBT：要计算当任务用时超过 50 毫秒时 FCP（First Contentful Paint，首次内容绘制）和 Time to Interactive（TTI，可交互时间）之间的所有时间段的总和（以毫秒表示），实际上就是计算 TBT（Total Blocking Time，总阻塞时间）。该时间描述了视图渲染到用户可进行操作间的阻塞情况。
- TBT 度量页面被阻止响应用户输入（如鼠标单击、屏幕点击或键盘按下）的总时间，其计算方法是在 FCP 和可交互时间之间添加所有长任务的阻塞部分。任何执行时间超过 50 毫秒的任务都是长任务，50 毫秒后的时间量就是阻塞部分。
FP（首次渲染时间）是指浏览器开始渲染页面的时间，FCP（首次内容渲染时间）是指浏览器首次渲染出内容的时间，LCP（最大内容显示时间）是指页面中最大的内容元素显示的时间，TBT（交互阻塞时间）是指浏览器在处理用户交互时被阻塞的时间。
通过分析这些指标，你可以了解页面的加载性能和用户体验，并采取相应的优化措施。例如，如果 FP 时间较长，可能是因为页面的 HTML 结构复杂或资源加载缓慢，你可以优化 HTML 结构、减少资源数量或使用异步加载等方式来提高性能。如果 FCP 时间较长，可能是因为页面的 CSS 或 JavaScript 加载缓慢，你可以优化 CSS 和 JavaScript 的加载顺序、压缩文件大小或使用缓存等方式来提高性能。如果 LCP 时间较长，可能是因为页面中的图片或其他大型资源加载缓慢，你可以优化图片的大小、格式或使用懒加载等方式来提高性能。如果 TBT 时间较长，可能是因为页面中的 JavaScript 代码执行时间过长，你可以优化 JavaScript 代码、减少 DOM 操作或使用异步操作等方式来提高性能。