什么是性能优化？如何性能优化？

FP (First Paint) - 开启体验之门

场景说明：当用户访问一个新网站时，首次绘制（FP）就像是网站的大门第一次打开。用户期待着的不只是白色的加载屏幕；他们希望有个迹象表明网站正在努力加载。

为何重要：即使内容还未完全到位，FP给了用户一个信号——你的网站在工作。在竞争激烈的互联网上，每个微小的优势都可能决定用户是否留下来。

前端工程师行动：优化服务器响应时间，使用CDN，确保CSS和JavaScript尽可能快地加载，以便用户能够迅速看到第一帧画面。

FCP (First Contentful Paint) - 展现价值的第一步

场景说明：用户看到网站上的第一个文本块、图像、SVG或其他内容元素时，这就是首次内容绘制（FCP）。在电子商务网站上，这可能是产品图片或优惠信息。

为何重要：FCP是告诉用户“有价值的东西正在到来”的第一个明确信号。这不仅是关于速度，更是关于如何迅速吸引用户的注意力。

前端工程师行动：优化图像大小和格式，对关键的CSS进行内联处理，以及推迟非关键JavaScript的加载，都可以加快FCP。

FMP (First Meaningful Paint) - 交付核心价值

场景说明：用户不仅仅需要看到内容，他们需要看到对他们有意义的内容。在新闻网站上，首次有意义绘制（FMP）可能是新闻标题和摘要；在博客中，可能是文章的开头。

为何重要：FMP直接关系到用户的首次深度印象。如果用户迅速看到了他们期望的内容，他们更可能继续阅读和探索。

前端工程师行动：分析哪些内容对用户最有价值，并确保这些内容优先加载。考虑使用服务端渲染或静态生成页面，以减少首次有意义绘制的时间。

TTI (Time to Interactive) - 全面互动的起点

场景说明：页面可交互意味着用户可以点击按钮、输入文本和进行导航。例如，在一个交互式教育平台，TTI是用户开始回答问题或进行测验的那一刻。

为何重要：用户对互动有着即时的预期。一个慢的TTI会导致用户感到挫败，甚至在页面准备好之前就离开。

前端工程师行动：优化JavaScript执行，分割代码以按需加载，利用浏览器的预加载能力，并减少主线程上的工作量。

TTFB (Time to First Byte) - 速度与响应的证明

场景说明：在网页访问过程中，TTFB是用户请求被服务器接收并开始处理的标志。在云端服务中，一个低TTFB意味着服务迅速响应，数据正在路上。

为何重要：用户往往不知道后端的复杂性，但他们会感受到延迟。一个快速的TTFB表示强大

的后端性能和良好的用户体验。

前端工程师行动：确保服务器性能优化，数据库响应迅速，考虑使用缓存策略，如Redis，减少数据库查询时间。

DCL (DOM Content Loaded) - 结构完整之时

场景说明：DCL发生在整个页面的HTML被加载和解析后，但不包括如样式表、图像和框架等资源。在一个复杂的申请表格页面，DCL是表单结构准备就绪的时刻，用户准备开始填写。

为何重要：在DCL之后，JavaScript通常开始执行，为页面带来额外的功能。一个快速的DCL可以使页面更早地对用户有用。

前端工程师行动：简化DOM元素，减少HTML的大小，推迟非关键资源的加载，并优化服务器端渲染。

CLS (Cumulative Layout Shift) - 稳定性的保障

场景说明：用户正在阅读一个精彩的文章，如果文中的图片或广告突然加载并导致内容跳动，这就产生了布局偏移。CLS衡量这种稳定性的缺乏。

为何重要：稳定的页面布局让用户可以专注于内容，而不是被突然的变化分心。一个低的CLS意味着更可靠的用户体验。

前端工程师行动：为图像和视频指定尺寸，确保广告元素有一个明确的占位符，避免在页面加载时插入新内容。

LCP (Largest Contentful Paint) - 精华内容的递交

场景说明：用户访问一个产品页面，LCP可能是产品图片的加载。这个图像不仅是页面上最大的内容，也是最能吸引用户注意的部分。

为何重要：LCP直接影响到用户是否愿意等待了解更多信息。如果关键内容迅速显示，用户会有更好的参与感。

前端工程师行动：优化最大的内容元素，如主图像或视频，以快速加载。使用下一代格式，如WebP，减少资源大小，并确保快速的内容交付网络。

如何衡量和优化网页性能指标

一个网页的性能优化旅程始于准确地衡量它的当前状态。以下是前端工程师可以使用的工具和策略，以确保他们拥有所需的数据来优化性能。

工具篇

Lighthouse：
- 用途：一个开源的、自动化的工具，用于提高网页质量。它可以评估性能、可访问性、渐进式Web应用、SEO和更多。
- 如何使用：可以在Chrome DevTools中运行，也可以作为CLI工具或Node模块使用。
- 优化策略：Lighthouse提供一个性能得分，并给出具体的优化建议，比如减少主线程工作量、移除阻塞渲染的资源等。
WebPageTest：
- 用途：一个在线工具，提供了深入的性能评估，包括首次绘制和完全加载时间。
- 如何使用：在WebPageTest的网站上输入你的页面URL进行测试。
- 优化策略：除了性能指标的分析外，它还提供了水平流图和资源加载图，帮助识别加载瓶颈。
Chrome DevTools：
- 用途：Chrome浏览器内置的开发工具集，提供了网络请求监控、性能评估、审计等功能。
- 如何使用：打开Chrome浏览器的开发者工具，通过网络和性能标签页来查看加载详情。
- 优化策略：利用它提供的性能时间线，识别渲染阻塞资源，分析JavaScript执行时间。

性能优化篇

减少JavaScript执行时间：
- 策略：通过代码分割和延迟加载非关键脚本，减少初始加载时执行的JavaScript代码量。
- 实施：使用Webpack、Rollup或其他现代模块打包器，利用它们的代码分割功能。
优化图片和媒体文件：
- 策略：选择正确的图片格式，比如WebP，它提供了比JPEG更好的压缩。
- 实施：在服务器端配置自动化工具，或使用构建工具的插件在构建过程中转换图片格式。
减少网络请求的往返次数：
- 策略：通过使用HTTP/2协议，实现请求的多路复用，减少了往返次数。
- 实施：确保服务器支持HTTP/2，对于静态资源，利用CDN来进一步减少延迟。
利用浏览器缓存：
- 策略：适当配置资源的缓存策略，可以避免用户在每次访问时都重新下载相同的资源。
- 实施：设置HTTP缓存头，如Cache-Control，并确保缓存策略符合你的更新需求。
避免不必要的重绘和重排：
- 策略：避免触发页面布局的改变，除非绝对必要，因为这会导致浏览器重新计算元素的位置和大小。
- 实施：优化CSS并避免在主要动画和过渡中使用属性，如width、`height

或top，改用transform`。

精简和合并资源文件：
- 策略：减少HTTP请求的数量对于提高网站加载速度至关重要。通过合并CSS和JavaScript文件，可以减少浏览器对服务器的请求数量。
- 实施：使用工具如Webpack可以合并和压缩资源文件。此外，确保在生产环境中启用压缩，如Gzip或Brotli，来减少发送到浏览器的数据量。
使用Service Workers：
- 策略：Service Workers允许你在用户的浏览器上缓存应用的资源，从而即使在离线时也可以访问这些资源。
- 实施：通过注册Service Workers，并定义哪些资源和请求应该被缓存，你可以提供一个更快速和更一致的用户体验。
优化字体加载：
- 策略：Web字体可以显著影响页面加载时间。选择优化过的字体文件，避免加载多个字体家族和字体样式。
- 实施：使用font-display: swap;在CSS中，以便在字体文件下载时显示默认字体。考虑使用字体子集化，只包含需要的字符。
扁平化CSS选择器：
- 策略：复杂的CSS选择器会增加浏览器的工作量，因为它必须评估页面上的每个元素是否与选择器匹配。
- 实施：尽量使用类选择器而不是嵌套选择器，避免使用通用选择器和标签选择器，这些都会减慢CSS的解析速度。
延迟加载非关键内容：
- 策略：将不重要的资源（如页面底部的图片和广告）延迟加载，直到它们即将出现在视口中。
- 实施：利用现代浏览器的loading="lazy"属性或使用JavaScript库，如IntersectionObserver，来实现图片和视频的懒加载。
预连接和DNS预取：
- 策略：通过告诉浏览器预先解析DNS和建立到关键域名的连接，可以减少用户请求资源时的延迟。
- 实施：在HTML的<head>中使用<link rel="preconnect">和<link rel="dns-prefetch">来指示浏览器预先连接到使用的CDN或其他域名。
避免昂贵的JavaScript和CSS：
- 策略：某些JavaScript函数和CSS属性（如box-shadows、gradients、filters）在渲染时特别消耗资源。
- 实施：对网站进行性能分析，识别和替换那些导致渲染延迟的昂贵属性和函数。使用Chrome DevTools的Performance标签页可以帮助识别它们。
使用Web Workers：
- 策略：对于复杂的或计算密集型任务，使用Web Workers可以让这些任务在主线程之外的后台线程中运行，避免阻塞用户界面。
- 实施：将数据处理或复杂计算迁移到Web Workers。确保合理使用，因为过多的Worker也可能对性能有负面影响。

接着奏乐接着舞。