导读

在现代 Web 开发中，前端性能优化变得越来越重要。良好的性能不仅提升用户体验，还能显著提高应用的用户留存率和转化率。在这篇文章中，将介绍前端性能优化的一些指导性的原则，性能优化的关键性能指标和一些常见的优化手段。

Web 性能指标

提及前端性能优化，我们首先需要了解Web 性能指标（Web Vitals）的概念，也就是我们首先需要知道到底要优化哪些数据指标。

Core Web Vitals

Core Web Vitals是 Google 提出的用来衡量和优化网页用户体验的一组关键性能指标。这些指标旨在反映一个网站的实际用户体验，包括加载性能、交互性和视觉稳定性。优化这些指标不仅可以提升用户的满意度和参与度，还能影响网站在搜索引擎中的排名。

Core Web Vitals 目前包括以下三个主要指标：

Largest Contentful Paint (LCP)：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的2.5 秒内发生。First Input Delay (FID)：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的 FID 应为100 毫秒或更短。Cumulative Layout Shift (CLS)：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的 CLS 应保持在0.1或更少。核心性能指标的阈值

其它重要 Web 性能指标

除了 Core Web Vitals 中的三个核心性能指标外，还有3个需要了解的重要 Web 性能指标：

Total Block Time(TBT)

Total Block Time(TBT) ：总阻塞时间，测量加载相应速度的重要实验室指标。测量First Contentful Paint 首次内容绘制 (FCP)与Time to Interactive 可交互时间 (TTI)之间的总时间，这期间，主线程被阻塞的时间过长，无法作出输入响应。该项指标有助于量化在页面交互性变为可靠前，不可交互程度的严重性，较低的 TBT 有助于确保页面的可用性。

Time to Interactive (TTI)

Time to Interactive (TTI)：可交互时间，测量加载响应度的重要实验室指标。测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。该指标有助于识别看起来具备交互性但实际上并非如此的页面情况。迅捷的 TTI 有助于确保页面的有效性。

Speed Index(SI)

Speed Index(SI)：速度索引，是一个非核心Web重要指标。用于衡量页面加载过程中页面内容的可视填充速度。它是使用页面加载行为的逐帧分析计算的，计算每100毫秒捕获的帧之间的视觉进度。

其它 Web 性能指标的阈值

性能优化原则（Principles of Optimization）

我接触到的最早的前端性能优化原则是 Steve Souders 在他 2008 年出版的《高性能网站建设指南》一书中介绍的 14 条优化原则：

减少 HTTP 请求使用内容发布网络添加 Expires 头压缩组件将样式表放在顶部将脚本放在底部避免 CSS 表达式使用外部 JavaScript 和 CSS坚守 DNS 查找精简 JavaScript避免重定向移除重复脚本配置 ETag使 Ajax 可缓存

接着 2010 年他又联合其他几位大咖编写出版了《高性能网站建设进阶指南》，又给出很多其它的优化原则：

（PS：如果还有不太了解这些优化原则细节的同学，推荐一定下载电子书或者购买纸质的书去阅读一下。）

性能优化最佳实践（Best Practices）

上图很清晰的显出了 Web 页面实际的渲染效果，也很直观的显出各个 Web 性能指标针对性能优化的各个不同阶段。

其实在浏览器正式显示 Web 页面内容之前，浏览器还做了一些其它的事情。