在浏览器里，从输入 URL 到页面展示，一般经历以下几个步骤：
- DNS 解析：将输入的 URL 转换为 IP 地址，找到目标服务器的地址。
- 建立 TCP 连接：浏览器向服务器发送请求，服务器响应请求，建立起 TCP 连接。
- 发送 HTTP 请求：浏览器向服务器发送 HTTP 请求，包括请求头和请求体。
- 服务器响应：服务器接收到请求后，返回 HTTP 响应，包括响应头和响应体。
- 浏览器解析渲染：浏览器收到响应后，根据响应头中的 Content-Type 等信息判断响应的类型，如果是 HTML 页面，则开始解析页面，构建 DOM 树，同时解析 CSS 样式，构建 CSSOM 树，并将两者合并形成渲染树，最终根据渲染树进行页面的渲染和绘制。
- 关闭 TCP 连接：页面渲染完毕后，浏览器关闭 TCP 连接，断开与服务器的连接。
前端监控就是尽可能的采集这一过程以及后续用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费。能够提高用户体验，前端监控可以实时采集用户体验数据，帮助开发者了解用户访问页面的性能瓶颈和体验状况，及时发现和解决问题，从而提高用户体验。也能提高开发效率，前端监控可以帮助开发者快速定位页面加载、渲染和交互过程中出现的异常问题，避免耗费过多时间在排查问题上，从而提高开发效率。
传统的性能指标主要关注浏览器的技术细节，例如页面的加载速度等。然而，这些指标很难反映出用户真正关心的体验。因此，以用户为中心的性能指标在实践中变得越来越重要。以下是一些以用户为中心的性能指标：
- FP (First Paint)：首次渲染时间点，即用户第一次看到页面有渲染内容的时间点。
- FCP (First Contentful Paint)：首次有内容渲染的时间点，即用户第一次看到有内容出现在页面的时间点。
- FMP (First Meaningful Paint)：首次绘制有意义内容的时间点，即用户第一次看到页面渲染了有用的内容的时间点。
- TTI (Time to Interactive)：页面加载完成并且能够响应用户输入的时间，即用户可以开始与页面交互的时间点。
- SI (Speed Index)：衡量页面可视区域加载速度，帮助检测页面的加载体验差异。
- FID (First Input Delay)：测量从用户第一次与页面交互到浏览器对交互作出响应之间的时间，即用户开始与页面交互到页面开始处理事件之间的时间。
这些指标从用户的角度考虑页面性能，更好地反映了用户的体验，能够帮助开发者更好地优化页面性能，提高用户体验。
常见异常
静态资源:加载页面所需的html、css和js 等文件，以及其他各类多媒体文件,如图片、音频和视频等。 静态资源错误:在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上。
请求异常
白屏异常 通常导致白屏发生的原因可能有如下几点:1.发生Js错误导致关键资源渲染失败。⒉请求异常或静态资源加载失败。3.长时间的Js线程繁忙阻塞渲染任务。
