无需登录 数据私有 本地保存

布局偏移录制器 - 捕捉 CLS 变化并生成动图

开发工具 性能 CLS 布局偏移 录制
8
0
0
0
布局偏移录制器
0.000 CLS

📰 每日科技快讯

欢迎阅读今日的科技快讯。本文汇集了本周最值得关注的科技动态与行业趋势。

🎯 限时推广 — 全新开发者工具已上线，立即体验高效开发！

人工智能领域持续火热，多家科技巨头发布了大模型的最新进展。业内人士指出，生成式AI正在重塑各行各业的运作方式。

图片加载中...

与此同时，Web性能优化成为前端开发者关注的焦点。Google推出的Core Web Vitals指标中，累积布局偏移（CLS）是衡量用户体验的关键指标之一。

布局偏移通常发生在页面加载过程中，当动态内容（如广告、图片、嵌入式iframe）突然出现并挤占已有内容的位置时，用户可能会误点击或失去阅读焦点。

为了减少CLS，开发者应当为所有动态内容预留空间，包括设置图片的宽度和高度属性、为广告槽位指定固定尺寸、以及避免在已有内容上方插入新元素。

优化CLS不仅能提升用户体验，还能改善搜索引擎排名，因为Google将Core Web Vitals作为排名信号之一。

偏移时间线
广告Banner ~1s
图片加载 ~3s
Cookie通知 ~5.5s
录制结束 ~8s
偏移事件日志 0
暂无偏移事件
点击「开始录制」以启动模拟
累计偏移: 0 次
生成的动图预览
录制完成后，GIF动图将在此处显示
关于布局偏移（CLS）的常见问题

CLS（Cumulative Layout Shift）是Google Core Web Vitals的核心指标之一，用于衡量网页在加载过程中内容意外移动的程度。它通过计算影响分数（impact fraction）和距离分数（distance fraction）的乘积得出。CLS分数越低越好，理想值应低于0.1。

常见原因包括：无预设尺寸的图片（加载后撑开空间）、延迟加载的广告（动态插入DOM）、Web字体加载（字体切换导致文本回流）、动态内容注入（如Cookie通知栏、弹窗）、以及异步加载的iframe等。

最佳实践包括：为所有图片和视频设置width和height属性；为广告槽位预留固定空间（使用min-height）；避免在现有内容上方动态插入元素；使用font-display: optional减少字体加载偏移；以及使用CSSaspect-ratio属性保持元素比例。

CLS = 影响分数 × 距离分数。影响分数衡量视口中受偏移影响的区域比例（0到1），距离分数衡量受影响元素移动的距离相对于视口尺寸的比例（0到1）。例如，一个元素向下移动了视口高度的25%，且影响了视口50%的区域，则CLS = 0.5 × 0.25 = 0.125。

本工具模拟了常见的布局偏移场景（广告延迟、无尺寸图片、Cookie通知），使用PerformanceObserver API实时捕获浏览器报告的CLS数据，同时使用html2canvas对模拟区域进行定时截图，最后通过gif.js将所有帧合成为GIF动图，直观展示布局偏移的全过程。

您可以在实际项目中使用以下代码监控CLS：
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (!entry.hadRecentInput) {
clsValue += entry.value;
}
}
}).observe({type: 'layout-shift', buffered: true});
排除用户交互后500ms内的偏移可以更准确反映真实CLS。
🔧 相关工具