前端性能优化

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

CLS (Cumulative Layout Shift) 是 Core Web Vitals 三个关键指标之一，用于衡量页面可见内容在加载过程中的意外布局偏移。CLS 反映了页面的视觉稳定性。

Core Web Vitals 是 Google 提出的用来衡量和优化网页用户体验的一组关键性能指标。这些指标旨在反映一个网站的实际用户体验，包括加载性能、交互性和视觉稳定性。

FID (First Input Delay) 是评估用户与网页互动时响应速度的关键性能指标之一。它主要衡量用户首次与页面互动（如点击按钮、链接或输入框）到浏览器实际响应这一互动之间的时间差。

LCP 是 Core Web Vitals 的三个关键指标之一，是 Google 用于评估网页用户体验的标准之一。LCP 时间应在 2.5 秒以内。如果 LCP 超过 4 秒，则需要进行优化。

开启 HTTP 缓存是前端性能优化手段中最常见的方法之一。开启缓 HTTP 存后，浏览器将使用其本地副本，而不是从网络获取。也就有效的减少了 HTTP 请求，可以显著优化重复访问的网页的加载速度。

当浏览器从服务器请求资源时，必须先将域名解析为IP地址，才能发出请求，此过程称为DNS解析。DNS解析可以导致请求增加明显的延迟，特别是访问多个跨域服务资源时，延迟可能会大大降低加载性能。

启用 gzip 压缩可大幅缩减所传输的资源文件响应的大小（最多可缩减 90%），服务器将向客户端发送较小的资源，从而显著缩短下载相应资源所需的时间、减少客户端的流量消耗并加快网页的首次呈现速度。

很幸运，随着技术的发展，现代的浏览器可以做到提前加载页面所需资源了。使用资源提示伪指令prefetch 和 preload，可以提前告知浏览器加载资源，从而可以缩短网站的（首次）加载速度，优化页面性能