1. 前端web页面性能的指标

• 1.1 加载时间（Load Time）：

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

• 1.2 首次渲染时间（First Paint）：

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

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

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

• 1.4 最大内容绘制（Largest Contentful Paint，LCP）：

  • LCP 表示视口（viewport）内最大的文本块或图片元素完成渲染的时间点，即用户看到页面“主要内容”的时间。

• 1.5 白屏时间（Time to First Byte，TTFB）：

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

• 1.6 页面完全加载时间（Page Load Time）：

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

• 1.7 资源加载时间（Resource Load Time）：

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

• 1.8 可交互时间（Time to Interactive，TTI）：

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

• 1.9 DOMContentLoaded 时间：

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

• 1.10 内容加载完成事件（Load Event）：

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

2. CSS 提高性能的方法

优化方向	具体方法	适用场景
减少文件体积	压缩、PurgeCSS、代码拆分	所有项目
选择器优化	简化嵌套、BEM 命名	大型项目
减少重排/重绘	使用 transform、避免布局抖动	动态交互页面
加载策略	Critical CSS、预加载、媒体查询	首屏性能敏感型网站
工具辅助	DevTools、CSS 预处理器	开发和构建阶段

• 核心原则：
  • 减少计算（选择器、重排）、减少传输（文件大小）、按需加载（代码拆分）。
  • 现代项目优先使用 Flexbox/Grid 替代浮动布局，结合构建工具（如 Webpack）自动化优化。