前端web页面性能的指标有哪些?

Web 页面性能的评估通常依赖于多个指标，这些指标提供了有关页面加载速度、交互性和用户体验的信息。这些时间通常指相对于页面加载开始的时间点的相对时间，以下是一些常见的 Web 页面性能指标：

1. 加载时间（Load Time）：

   • 页面加载完成所需的总时间。这包括从开始加载到加载完成的整个时间。

2. 首次渲染时间（First Paint）：

   • 浏览器首次将像素渲染到屏幕的时间。即使只是一部分内容，用户仍然可以看到页面的渲染。

3. 首次内容渲染时间（First Contentful Paint，FCP）：

   • 浏览器首次将页面的实际内容（文本、图像等）渲染到屏幕的时间。这是用户可以看到实际内容的时间点。

4. 首次有意义渲染时间（First Meaningful Paint，FMP）：

   • 用户认为页面开始有意义渲染的时间。这通常是用户可以开始与页面进行交互的时间。

5. 白屏时间（Time to First Byte，TTFB）：

   • 从发起页面请求到浏览器收到来自服务器的第一个字节的时间。较低的 TTFB 通常意味着更快的加载时间。

6. 页面完全加载时间（Page Load Time）：

   • 页面上所有资源都加载完成并准备好交互所需的时间。
   • 页面加载时间指的是从用户请求页面开始到页面完全加载完成并且所有资源（如图片、样式表、脚本等）都已经加载完成的时间。
   • 页面加载时间通常是以页面的 load 事件触发的时间为准。在这个时间点，页面上的所有资源都已经加载完成，但并不一定是完全交互可用的状态。

7. 资源加载时间（Resource Load Time）：

   • 单个资源（如图像、脚本、样式表）加载完成所需的时间。

8. 可交互时间（Time to Interactive，TTI）：

   • 页面加载完成后，用户可以开始与页面进行交互的时间。这包括 JavaScript 执行完毕、事件监听器绑定完成等。
   • 当页面加载完成并且用户可以自由地点击链接、填写表单等进行交互时，交互时间被认为是已达到。
   • TTI 是一个更加细致的性能指标，因为它不仅仅考虑了页面上所有资源的加载完成时间，还考虑了页面的响应性能，即用户实际能够开始与页面进行交互的时间。

9. DOMContentLoaded 时间：

   • 当 HTML 文档被完全加载和解析完成时触发的事件。在这个事件触发之前，页面的 DOM 是完全可用的。

10. 内容加载完成事件（Load Event）：

    • 当整个页面和依赖资源（如样式表、图像）都加载完成时触发的事件。

这些指标可以通过使用浏览器的开发者工具或性能分析工具进行监测和测量。综合考虑这些指标可以帮助开发者了解其网站的性能状况，进而进行优化以提供更好的用户体验。Google 的 Lighthouse 工具是一个常用的工具，可以评估 Web 页面性能并提供改进建议。