CLS是衡量页面视觉稳定性的量化指标，反映用户浏览中元素意外位移的累积分数，由未预留空间的图片、iframe、字体替换及动态插入内容等引发。
CLS 是什么，它不等于“布局偏移”本身
CLS（Cumulative Layout Shift）是衡量页面视觉稳定性的一个量化指标，不是某种 HTML 属性或可直接开关的设置。它反映的是用户浏览过程中，元素在视口内发生**意外位移**所累积的分数。HTML 本身没有 cls 标签或 cls 属性，也不存在“HTML CLS 限制”这种配置项——这是常见误解的源头。
真正影响 CLS 的，是渲染过程中因资源加载、脚本执行、样式计算等导致的**无预期重排重绘**。比如图片没设宽高、字体加载替换、动态插入广告位、未预留空间的第三方 widget 等。
哪些 HTML 写法会显著拉高 CLS 分数
以下写法在 Chrome DevTools 的 Performance 或 Experience 面板中常被标记为 CLS 贡献源：
-
<img>标签缺失width和height属性，浏览器无法预留空间，加载后撑开布局 -
<iframe>（尤其是嵌入广告或视频）未设置固定尺寸，且loading="lazy"延迟加载时突然出现 - 使用
font-display: swap但未配合@font-face的size-adjust或ascent-override，导致文字回流 - 通过 JS 动态向
<body>或<main>插入内容（如 cookie banner、推荐模块），且未用position: fixed或提前占位
如何用 HTML + 少量 CSS 主动降低 CLS
关键思路是：**让浏览器在首次绘制前就“知道”元素大概占多大位置**。不需要框架或构建工具，纯 HTML/CSS 即可生效：
立即学习“前端免费学习笔记（深入）”；
✅ 推荐做法：
- 所有
<img>、<video>、<iframe>必须声明width和height，并搭配aspect-ratio（现代浏览器）或padding-top百分比占位（兼容旧版） - 用
<link rel="preload" as="image" href="...">提前加载首屏关键图片，减少加载延迟引发的位移 - 对异步加载的内容（如评论框、社交按钮），用
height: 0; overflow: hidden;初始状态 + JS 加载完成后再展开，或用min-height预留保守高度 - 避免在
<head>中写内联<style>修改body尺寸（如加margin-top），这类样式应合并到外部 CSS 并确保尽早解析
❌ 错误示例（会触发 CLS）：
<img src="hero.jpg"> <!-- 没有 width/height --> <div id="ads"></div> <!-- JS 后续填充，无占位 -->
验证 CLS 改进是否真实有效
别只信 Lighthouse 报告里的单次分数——它容易受缓存、网络波动干扰。要确认改善是否落地，必须做三件事：
- 打开 Chrome DevTools → Performance 面板 → 录制一次完整页面加载（勾选
Layout Shift Regions），观察红色高亮区域是否消失或缩小 - 在 Application → Clear storage 清空所有缓存和 Cookie，再硬刷新（Ctrl+Shift+R），避免本地缓存掩盖问题
- 用
getCLSWeb API 在控制台手动采集（需页面已加载web-vitals库）：import { getCLS } from 'web-vitals'; getCLS(console.log);
注意：CLS 是累积值，一个页面可能有多个小位移叠加成高分。修复时得逐个定位 region，不能只盯着首屏图片。
