通过防抖机制控制 canvas 尺寸更新时机，避免 resizeobserver 频繁触发导致布局重排与滚动条反复出现，从而在保持全屏画布的同时彻底解决滚动条“闪烁”问题。
通过防抖机制控制 canvas 尺寸更新时机，避免 resizeobserver 频繁触发导致布局重排与滚动条反复出现，从而在保持全屏画布的同时彻底解决滚动条“闪烁”问题。
在构建全屏 Canvas 应用（如游戏、数据可视化或交互式绘图）时，一个常见却易被忽视的问题是：Canvas 动态适配视口尺寸的过程中，滚动条会短暂闪现又消失——即“滚动条闪烁”。其根本原因在于：当 Canvas 的 width/height 属性被频繁修改（尤其在移动端横竖屏切换等高频 resize 场景下），浏览器可能因内容尺寸瞬时超出视口而临时渲染滚动条；随后布局回填又将其隐藏，形成肉眼可见的闪烁。
上述代码中直接在 ResizeObserver 回调内同步设置 canvas.width 和 canvas.height，虽逻辑正确，但缺乏节流控制。由于 ResizeObserver 对尺寸变化极为敏感（例如 iOS Safari 在旋转动画过程中会触发多次微小变更），连续写入 canvas 尺寸会引发多次重绘与重排，间接干扰 body 的溢出计算，最终诱发滚动条抖动。
✅ 解决方案：轻量级防抖（Debounce）控制尺寸更新频率
我们引入一个布尔标志 shouldResize 与 setTimeout 组合，确保 Canvas 尺寸仅在 resize 流“稳定”后（例如 1 秒内无新变化）更新一次：
let shouldResize = true;
screenSizeObserver = new ResizeObserver(() => {
if (shouldResize && canvas) {
shouldResize = false;
const w = document.body.clientWidth;
const h = document.body.clientHeight;
canvas.width = w;
canvas.height = h;
// 可选：同步更新 CSS 样式以确保渲染一致性
canvas.style.width = `${w}px`;
canvas.style.height = `${h}px`;
}
// 重置标志，允许下一次稳定后的更新
setTimeout(() => {
shouldResize = true;
}, 1000); // 1秒防抖窗口，可根据实际场景调整（如 300ms 更灵敏）
});
screenSizeObserver.observe(document.body);
⚠️ 关键注意事项：
- 不要仅依赖 CSS width/height：Canvas 的绘制分辨率由 .width/.height 属性（像素值）决定，CSS 仅控制显示缩放。若只改 CSS，会导致图像模糊或拉伸；必须同步设置 DOM 属性。
- body 高度需严格约束：确保 和 均设为 height: 100% 且无边距/填充（已含在原始 CSS 中），否则 clientHeight 可能小于视口。
- 移动端兼容性增强建议：在 initialize() 中添加 window.visualViewport?.addEventListener('resize', ...) 作为补充监听，应对 Safari 等浏览器对 body ResizeObserver 的支持差异。
- 性能优化延伸：如需更高精度，可用 requestIdleCallback 替代 setTimeout 实现更平滑的异步更新；对于复杂应用，还可结合 IntersectionObserver 检测 Canvas 是否在视口内，暂停非可见状态下的 resize 监听。
综上，防抖不是“延迟响应”，而是“智能收敛”——它让 Canvas 尺寸更新与用户真实的视口稳定状态对齐，从根源上切断滚动条闪烁的触发链。这一模式简洁、低侵入、高兼容，是全屏 Canvas 自适应开发中的推荐实践。
