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：文章来源：https://www.toymoban.com/news/detail-856212.html
-
策略：某些JavaScript函数和CSS属性（如
box-shadows、gradients、filters）在渲染时特别消耗资源。 - 实施：对网站进行性能分析，识别和替换那些导致渲染延迟的昂贵属性和函数。使用Chrome DevTools的Performance标签页可以帮助识别它们。
-
策略：某些JavaScript函数和CSS属性（如
-
使用Web Workers：文章来源地址https://www.toymoban.com/news/detail-856212.html
- 策略：对于复杂的或计算密集型任务，使用Web Workers可以让这些任务在主线程之外的后台线程中运行，避免阻塞用户界面。
- 实施：将数据处理或复杂计算迁移到Web Workers。确保合理使用，因为过多的Worker也可能对性能有负面影响。
到了这里，关于什么是性能优化？如何性能优化？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
