CLS需通过PerformanceObserver监听layout-shift条目并累加非用户触发的entry.value值；常见原因包括图片缺宽高、动态内容无占位、字体加载重排等，优化后需用DevTools高亮、Lighthouse及CrUX验证。
“LayoutShift”本身不是HTML5中可直接调用的API或方法，也没有LayoutShift这个对象或接口。你实际想获取的是Cumulative Layout Shift（CLS）——即页面生命周期内所有意外布局偏移的总和，它是Lighthouse和Chrome DevTools中衡量视觉稳定性的重要核心指标。
如何准确获取CLS值
CLS无法通过JavaScript手动“计算”得出，它由浏览器在真实用户交互过程中自动采集并汇总。但你可以通过以下方式获取：
- 使用PerformanceObserver监听layout-shift条目：这是目前唯一可在运行时捕获单次偏移并累加的方式
-
在页面加载完成后调用
performance.getEntriesByType('layout-shift')，遍历所有LayoutShift条目（注意：这是PerformanceEntry子类型，不是自定义类） -
每个条目含
value字段：代表该次偏移对CLS的贡献值（0.001–1之间），需累加所有hadRecentInput === false的条目（排除用户主动操作引发的偏移）
关键代码示例（监听并累加CLS）
以下脚本应在页面早期（如中）注入，确保不漏掉首屏偏移：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
let clsValue = 0;
const observer = new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
// 只统计非用户输入触发的偏移
if (!entry.hadRecentInput) {
clsValue += entry.value;
}
}
});
observer.observe({ entryTypes: ['layout-shift'] });
// 后续可通过 console.log('CLS:', clsValue) 查看当前累积值
导致CLS升高的常见原因及优化方向
CLS高，本质是元素在渲染后发生了不可预期的位置跳动。重点排查以下几类情况：
立即学习“前端免费学习笔记（深入）”；
-
图片/视频缺失宽高属性：未设
width/height或aspect-ratio，加载后撑开容器造成下方内容下移 - 动态插入内容无预留空间：比如广告、嵌入式评论、banner轮播在DOM就绪后才注入，且未提前占位
-
字体加载引发FOIT/FOUT：Web Font替换时文字尺寸变化，导致行高或容器重排；建议用
font-display: optional或swap配合size-adjust -
未设置
transform替代top/left动画：用position: relative; top: 10px触发布局重排，而transform: translateY(10px)只走合成层，不影响CLS
验证优化是否生效
仅靠代码监听不够，必须结合真实场景验证：
- 在Chrome DevTools → Application → Rendering → Layout Shift Regions开启高亮，直观看到哪些区域在跳动
- 用Lighthouse跑多次移动端模拟测试（尤其网络节流+CPU节流），观察CLS评分是否从红色（0–49）提升至绿色（90+）
- 上线后通过CrUX（Chrome用户体验报告）查看真实用户CLS分布，地址：https://www.php.cn/link/16f60abada0c6e46aec7be29a16d05f1
