怎么通过HTML5中LayoutShift获取页面的累积布局偏移量并提升性能-H5教程-PHP中文网

CLS需通过PerformanceObserver监听layout-shift条目并累加非用户触发的entry.value值；常见原因包括图片缺宽高、动态内容无占位、字体加载重排等，优化后需用DevTools高亮、Lighthouse及CrUX验证。

怎么通过html5中layoutshift获取页面的累积布局偏移量并提升性能

“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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！