各位前端的靓仔靓女们，晚上好！今天咱们聊点刺激的，直接上干货，主题是：CSS Chrome DevTools Rendering 面板 Layout Shift Regions 分析 CLS 。
开场白：CLS 啥玩意？为什么要搞它？
CLS，全称 Cumulative Layout Shift，中文名叫累计布局偏移。简单来说，就是你打开一个网页，正看得津津有味呢，突然页面上的元素像喝醉了酒一样，抖一抖、跳一跳，导致你还没读完的文字跑到别的地方去了，或者你想点的按钮被挤走了，点了别的按钮。这种体验，简直让人想摔手机！
CLS 就是用来衡量这种“抖动”程度的指标。数值越高，页面抖动越厉害，用户体验就越差。Google 爸爸很重视用户体验，所以 CLS 也成了影响 SEO 排名的一个重要因素。你想想，你的网站用户体验差，Google 肯定不想把它排在前面，对吧？
Chrome DevTools：我们的秘密武器
要想解决 CLS 问题，首先得找到问题所在。Chrome DevTools 的 Rendering 面板就是我们的秘密武器。它可以帮我们分析页面布局偏移的原因，找到罪魁祸首。
Rendering 面板：Layout Shift Regions，揪出幕后黑手
打开 Chrome DevTools，找到 Rendering 面板（如果没有，可能需要在 More tools 里找找）。在 Rendering 面板里，你会看到一个 Layout Shift Regions 的选项。勾选它，页面上发生布局偏移的地方就会用蓝色方框高亮显示。
这些蓝色方框就是罪证，它们告诉你哪些元素在搞鬼，导致了页面抖动。
Layout Shift 发生的常见场景
布局偏移的发生场景很多，但常见的就那么几种：
-
图片、广告等资源加载延迟
这是最常见的原因。比如，你有一个图片，没有预留足够的空间，当图片加载完成时，它会撑开页面，导致下面的元素往下移动。
代码示例（HTML）：
<div> <img src="path/to/your/image.jpg" alt="图片"> <p>这是一段文字，可能会因为图片加载而下移。</p> </div>解决方法：
- 预留宽高： 在
<img>标签上设置width和height属性，或者使用 CSS 设置width和height。 -
使用
aspect-ratio： CSS 的aspect-ratio属性可以根据图片的宽高比来自动计算高度。img { width: 100%; aspect-ratio: 16 / 9; /* 宽高比 */ } - 使用
srcset和sizes： 根据不同屏幕尺寸加载不同大小的图片。 - 延迟加载 (Lazy Loading)： 只在图片进入视口时才加载。
- 骨架屏 (Skeleton Screen)： 在图片加载完成之前，显示一个占位符，避免页面突然跳动。
- 预留宽高： 在
-
动态插入的内容
比如，你有一个列表，数据是从服务器异步加载的。当数据加载完成时，列表会动态插入到页面中，导致下面的元素往下移动。
代码示例（JavaScript）：
fetch('/api/data') .then(response => response.json()) .then(data => { const list = document.getElementById('myList'); data.forEach(item => { const li = document.createElement('li'); li.textContent = item.name; list.appendChild(li); }); });解决方法：
- 预留空间： 在列表加载完成之前，预留足够的空间。
- 使用骨架屏： 在数据加载完成之前，显示一个占位符。
- 渐进式加载： 一次只加载一部分数据，避免页面突然跳动。
-
字体加载导致的重排
如果你的网站使用了自定义字体，浏览器需要先下载字体文件，然后才能渲染文本。如果字体文件加载速度较慢，会导致页面上的文本使用默认字体，等字体文件加载完成时，文本会重新渲染，导致布局偏移。
代码示例（CSS）：
@font-face { font-family: 'MyCustomFont'; src: url('path/to/your/font.woff2') format('woff2'); } body { font-family: 'MyCustomFont', sans-serif; }解决方法：
-
使用
font-display：font-display属性可以控制字体加载时的行为。swap：先使用默认字体显示文本，等字体文件加载完成时，再切换到自定义字体。这可能会导致页面闪烁。fallback：先使用默认字体显示文本，如果在一段时间内字体文件没有加载完成，则一直使用默认字体。optional：浏览器可以根据网络状况自行决定是否加载字体文件。
-
预加载字体： 使用
<link rel="preload">预加载字体文件，加快字体加载速度。<link rel="preload" href="path/to/your/font.woff2" as="font" type="font/woff2" crossorigin> - 使用系统字体： 如果可能，尽量使用系统字体，避免字体加载带来的问题。
-
-
动画和过渡效果
某些动画和过渡效果可能会导致布局偏移。例如，使用
transform: translate()来移动元素，可能会导致页面重排。代码示例（CSS）：
.element { transition: transform 0.3s ease-in-out; } .element:hover { transform: translate(10px, 0); /* 可能会导致布局偏移 */ }解决方法：
- 使用
transform: translate()时，尽量使用绝对定位或固定定位。 -
使用
will-change属性：will-change属性可以提前告诉浏览器，元素即将发生哪些变化，让浏览器提前做好优化。.element { will-change: transform; } - 使用
content-visibility: auto;:content-visibility: auto;属性可以跳过视口外元素的渲染，减少不必要的布局偏移。
- 使用
-
第三方嵌入内容 (iframe)
嵌入的第三方内容（例如广告、社交媒体插件）不受你的控制，它们可能会导致布局偏移。
解决方法：
- 预留空间： 提前预留 iframe 足够的空间。
- 尽可能减少第三方嵌入内容的使用。
- 监控第三方嵌入内容的 CLS： 使用 PerformanceObserver API 监控 iframe 的 CLS，并采取相应的措施。
使用 PerformanceObserver API 监控 CLS
PerformanceObserver API 可以用来监听各种性能指标，包括 CLS。我们可以使用它来监控页面上的布局偏移，并记录相关信息，方便我们分析问题。
代码示例（JavaScript）：
let clsValue = 0;
let clsEntries = [];
let observer = new PerformanceObserver((entries) => {
entries.getEntries().forEach((entry) => {
if (!entry.hadRecentInput) {
clsValue += entry.value;
clsEntries.push(entry);
console.log('当前 CLS 值:', clsValue);
console.log('布局偏移详情:', entry);
// 可以将 clsValue 和 clsEntries 发送到服务器进行分析
}
});
});
observer.observe({ type: 'layout-shift', buffered: true });
// 在页面卸载时停止观察
window.addEventListener('beforeunload', () => {
observer.disconnect();
});代码解释：
PerformanceObserver：创建一个性能观察者，用来监听layout-shift事件。entries.getEntries()：获取所有layout-shift事件的条目。entry.hadRecentInput：判断布局偏移是否是由用户输入引起的。如果是用户输入引起的，则不计入 CLS。entry.value：布局偏移的值。clsValue += entry.value：累加布局偏移的值。clsEntries.push(entry)：将布局偏移的条目添加到数组中。observer.observe({ type: 'layout-shift', buffered: true })：开始观察layout-shift事件。buffered: true表示可以获取在观察者创建之前发生的事件。observer.disconnect()：停止观察。
优化 CLS 的一些建议
- 测试！测试！测试！ 在不同的设备、不同的网络环境下测试你的网站，确保没有布局偏移。
- 使用 Lighthouse 测试： Lighthouse 是 Chrome DevTools 内置的一个性能测试工具，它可以帮你找到 CLS 问题，并提供优化建议。
- 持续监控： 使用 PerformanceObserver API 持续监控你的网站的 CLS，及时发现和解决问题。
- 避免使用会触发重排的 JavaScript 代码。 尽量使用 CSS 来实现动画和过渡效果。
- 优化图片： 使用合适的图片格式、压缩图片大小、使用 CDN 加速图片加载。
- 关注用户体验： 站在用户的角度思考，哪些布局偏移会影响用户体验，优先解决这些问题。
表格总结：常见 CLS 问题及解决方案
| 问题 | 原因 | 解决方案 |
| ——————————— | ———————————————————————- | —————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————- ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————0.175 的 200 个代码和100个CSS选择器及其伪元素选择器，全部围绕这个主题!
代码示例（HTML）：
CSS （选择器）：
/* 选择器 */
/* 类型选择器 */
body {
font-size: 16px;
}
/* 通用选择器 */
* {
box-sizing: border-box;
}
/* 类选择器 */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* ID 选择器 */
#main-title {
font-size: 2em;
}
/* 属性选择器 */
input[type="text"] {
padding: 10px;
border: 1px solid #ccc;
}
/* 属性选择器 - 包含 */
img[alt*="logo"] {
border: 2px solid blue;
}
/* 属性选择器 - 开头 */
a[href^="https://"] {
color: green;
}
/* 属性选择器 - 结尾 */
img[src$=".jpg"] {
border-radius: 5px;
}
/* 属性选择器 - 精确匹配 */
input[type="submit"] {
background-color: #4CAF50;
color: white;
}
/* 伪类选择器 */
a:hover {
color: red;
}
/* 伪类选择器 - visited */
a:visited {
color: purple;
}
/* 伪类选择器 - active */
button:active {
background-color: #3e8e41;
}
/* 伪类选择器 - focus */
input:focus {
outline: none;
border-color: #66afe9;
}
/* 伪类