财富是对认知的补偿，不是对勤劳的奖励

大家好，我是柒八九。

前言

今天我们来聊聊另外一个比较重要的性能指标CLS。

如果想了解该系列文章(浏览器底层原理&优化方案)，可以参考我们已经发布的文章。如下是往期文章。

1. 页面是如何生成的(宏观角度)
2. Chromium 最新渲染引擎--RenderingNG
3. RenderingNG中关键数据结构及其角色
4. 浏览器之客户端存储
5. 浏览器_知识点精讲
6. 像素是怎样练成的
7. 浏览器之资源获取优先级(fetchpriority)
8. 浏览器之性能指标_FCP
9. 浏览器之性能指标-LCP

你能所学到的知识点

1. 前置知识点
2. CLS是个啥
3. CLS的原理
4. 如何测量CLS
5. 如何优化CLS得分

好了，天不早了，干点正事哇。

1. 前置知识点

核心 Web 指标

核心 Web 指标（Core Web Vitals）是一组用于评估网页性能的关键指标。

它由Google提出，并成为Google排名算法的重要因素。核心 Web 指标旨在衡量用户体验的关键方面，涵盖了加载速度、交互性和视觉稳定性。

核心 Web 指标包括以下三个指标：

1. 最大内容绘制时间（Largest Contentful Paint，LCP）：衡量从页面加载开始到最大内容元素完全可见的时间。

• 测量加载性能
• 为了提供良好的用户体验，LCP 应在页面首次开始加载后的2.5 秒内发生。
• 

2. 首次输入延迟（First Input Delay，FID）：衡量用户首次与页面进行交互（例如点击按钮或链接）的延迟时间。

• 测量交互性
• 为了提供良好的用户体验，页面的 FID 应为100 毫秒或更短。
• 

3. 累积布局偏移（Cumulative Layout Shift，CLS）：衡量页面上元素位置发生变化的频率和程度。

• 测量视觉稳定性
• 为了提供良好的用户体验，页面的 CLS 应保持在 0.1. 或更少。
• 

为了确保我们能够在大部分用户的访问期间达成建议目标值，对于上述每项指标，一个良好的测量阈值为页面加载的第 75 个百分位数，且该阈值同时适用于移动和桌面设备。

如果一个页面满足上述全部三项指标建议目标值的第 75 个百分位数，那么评核心 Web 指标合规性的工具应评判该页面为通过。

图片的宽高比(Aspect Ratio)

在渲染时的作用

图片的宽高比在渲染时起到重要作用，它影响了图片在页面中的布局和显示效果。以下是宽高比在渲染中的几个方面作用：

1. 布局计算：浏览器在计算页面布局时，会使用图片的宽高比来确定图片在文档流中的尺寸和位置。宽高比可以帮助浏览器确定图片的宽度和高度，以便正确地分配空间。
   
2. 图片显示：宽高比决定了图片在显示时的比例和形状。如果图片的宽高比与显示容器（如<img>标签或CSS容器）的宽高比不匹配，图片可能会被拉伸或压缩，导致失真或变形。
   
3. 响应式设计：在响应式网页设计中，使用宽高比可以确保图片在不同屏幕尺寸和设备上呈现出良好的外观。通过设置宽高比，可以让图片自适应容器的尺寸变化，并保持正确的比例。
   
4. 避免布局偏移：使用正确的宽高比可以避免在图片加载过程中发生布局偏移。如果在图片加载前没有指定宽高比，浏览器可能无法正确预留图片所需的空间，导致页面布局在加载后发生突然变化。
   

总而言之，宽高比在图片的布局、显示和响应式设计方面都起到重要作用，它能够确保图片在不同环境下呈现出正确的比例和外观，并避免布局偏移的问题。

如何确定/设置宽高比

确定或设置一个图片的宽高比可以通过以下几种方法实现：

1. 使用固定的宽度和高度：如果我们已经确定了要显示的图片的具体宽度和高度，可以直接使用这些数值来计算宽高比。宽高比可以通过将宽度除以高度或将高度除以宽度来得到。
   
2. CSS样式：可以通过CSS样式来设置图片的宽高比。使用padding-top属性，将上边距设置为以百分比表示的宽高比。

• 例如，如果宽高比为16:9，可以将padding-top设置为56.25%（9除以16乘以100）。
• 在默认的水平文档流方向下，CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的，这个和top, bottom等属性的百分比值不一样。

.image-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 宽高比 */
}
.image-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

3. JavaScript计算：如果需要动态计算宽高比，可以使用JavaScript来获取图片的实际宽度和高度，并进行计算。通过获取图片的naturalWidth和naturalHeight属性，然后进行相应的计算得出宽高比。

const img = document.querySelector('img');
const aspectRatio = img.naturalWidth / img.naturalHeight;

确定宽高比后，我们可以将其应用于图片容器或使用相应的CSS样式将其应用于图片本身，以确保在渲染和布局过程中正确显示图片的宽高比。

FOIT/FOUT

FOIT和FOUT是与Web字体加载相关的术语。

FOIT代表"Flash of Invisible Text"，意为不可见文本的闪烁。

当使用Web字体时，浏览器在下载字体文件时，会显示一段时间的空白文本，直到字体文件完全加载完成。这段时间内，用户可能会看到页面上出现了空白文本，然后突然闪现出字体样式。这种体验被称为FOIT。

FOUT代表"Flash of Unstyled Text"，意为未样式化文本的闪烁。

与FOIT类似，当使用Web字体时，浏览器可能会先显示系统默认字体，然后在字体文件加载完成后，突然将文本样式化为所需的Web字体。这种体验被称为FOUT。

FOIT和FOUT都是由于Web字体加载的延迟而导致的不佳用户体验。用户可能会看到文本内容在加载过程中发生闪烁或样式变化，给页面的整体稳定性和一致性带来了困扰。为了解决FOIT和FOUT问题，可以使用CSS属性，如font-display，来控制字体加载和显示的方式，以平滑地呈现文本内容，提高用户体验。

想象一下：你正在加载一个网站，它看起来准备就绪。你点击一个博客的图片来阅读文章，突然整个页面发生了变化，因为其他内容刚刚加载完毕。你点击了完全不相关的东西，加载了一个你根本没有打算打开的页面。如果你自己经历过这个问题，你就知道累积布局位移（Cumulative Layout Shift，CLS）对网站的用户体验造成了多大的负面影响。

2. CLS 是个啥?

CLS:是Cumulative Layout Shift的简写，中文名称累积布局位移。 衡量网页视觉稳定性的网络性能指标

一图胜千言

以下是一个网站的布局，在页面加载过程中不断变化。在下面的动图中，我们的视口保持不变，也没发生页面滚动，但页面自行发生了巨大的位移。

作为访问该网站的用户，我们可能无法确定页面何时完成加载。我们可能会尝试点击一个新闻故事，结果页面布局发生了巨大变化。这样一来，我们就会进入错误的页面，不得不浪费时间返回。根据页面的不同，这种情况可能会发生多次。如果频繁发生这种情况，我们就会失去对该页面继续访问的兴趣，导致用户留存度断崖式下降。

同时，CLS分数可能会影响我们从谷歌和其他搜索引擎获得的流量。

网站越复杂，其CLS得分就越高的可能性越大（只是可能性比较大，复杂的网站我们也可以通过优化将CLS控制在合理的范围内）。例如，像谷歌首页这样的简单布局就没有CLS，因为它们只包含很少的元素：

布局偏移发生是因为浏览器倾向于异步加载页面元素。更重要的是，页面上可能有具有未知尺寸的媒体元素。这种组合意味着在加载完成之前，浏览器无法确定各个元素将占用多少空间。因此产生了剧烈的布局位移。

CLS有趣的地方在于它可以通过各种工具进行客观测量，但也是以用户为中心的，因为每个用户的设备可能会影响我们网站的布局如何发生位移。虽然我们无法控制这一方面，但我们肯定可以采取预防措施，以使其影响最小化。

CLS是Google用来评估网站提供强大用户体验的三个核心网络指标之一。 之前，我们已经在浏览器之性能指标-LCP介绍过LCP。有兴趣的可以参考之前的文章。

产生CLS的常见原因

CLS分数受没有在页面上指定空间的每个内容的影响，导致它们意外加载并移动其他内容，从而导致页面抖动。

根据谷歌文档的说法，CLS 较差的最常见原因为：

• 无尺寸的图像
• 无尺寸的广告、嵌入和 iframe
• 动态注入的内容
• 导致不可见文本闪烁 (FOIT)/无样式文本闪烁 (FOUT) 的网络字体
• 在更新 DOM 之前等待网络响应的操作

好的CLS 得分

CLS的分数越低，布局就越稳定。谷歌性能测量工具使用的官方CLS阈值如下：

• 良好 - CLS低于0.1，
• 需要改进 - CLS在0.1和0.25之间，
• 较差 - CLS高于0.25。

为了达到“良好”的CLS阈值，谷歌建议在所有页面浏览中，将CLS分数保持在0.1以下的比例达到75%。

3. CLS的原理

CLS通过比较两个渲染帧来计算页面元素的移动程度和布局变化对视口的影响部分。

CLS有两个因素：影响分数（Impact Fraction）和距离分数（Distance fraction）。

影响分数（Impact Fraction）

要计算影响分数，首先需要计算影响区域。

影响区域（Impact Region）

影响区域（Impact Region）定义了布局偏移所影响的区域。谷歌会将原始帧与布局偏移后的帧进行比较，并识别出所有受影响的页面元素，从而定义了影响区域。

影响区域通常是一个矩形，但如果存在多个布局偏移，无论是水平还是垂直的，它可能是一个更复杂的形状。

要定义影响分数（Impact Fraction），需要将影响区域的面积除以视口的面积：

影响区域的面积 / 视口的面积 = 影响分数