Chrome周期性重绘页面会清除Canvas？是否有文档说明及如何避免？

1. 这是有文档记录的行为吗？ #

这是Chrome内置的内存管理机制，官方有明确说明。当标签页占用内存过高、长时间处于后台，或是系统内存紧张时，Chrome会启动资源回收策略——canvas的像素数据属于内存密集型资源，会被优先回收。回收后仅保留canvas的DOM结构，不会存储之前的绘制内容，所以页面恢复后canvas会呈现空白，其他DOM元素则会重新渲染。

2. 能否检测并自行重绘？ #

可以实现，核心是捕捉页面恢复可用的时机，触发重绘逻辑：

• 最直接的方式是监听visibilitychange事件，当标签页从后台切回前台时，调用预先封装好的canvas重绘函数：

document.addEventListener('visibilitychange', () => {
  if (!document.hidden) {
    // 替换成你的canvas重绘函数
    redrawMyCanvas();
  }
});

• 关键是要把canvas的绘制逻辑封装成可重复调用的独立函数，这样在需要重绘时直接执行即可。

3. 能否阻止该行为？ #

无法完全阻止，这是Chrome为避免单个标签页耗尽系统内存、导致浏览器崩溃的保护机制。但可以通过优化手段降低触发概率：

• 优化内存占用：及时清理无用的canvas资源，比如销毁不再使用的离屏canvas、移除未使用的绘制图层；排查并修复内存泄漏，比如及时解绑事件监听器、清理无用的对象引用。
• 适配后台状态：在页面进入后台时（通过visibilitychange判断），暂停内存密集型的绘制或计算操作，切回前台再恢复。
• 使用高效绘制API：用requestAnimationFrame替代setTimeout/setInterval执行绘制，让Chrome更好地调度绘制资源，减少内存压力。
• 替换绘制方案：如果是大型复杂绘制场景，可以考虑用WebGL替代2D canvas，WebGL的内存管理更高效，Chrome对其资源回收的触发阈值更高。

内容的提问来源于stack exchange，提问作者Sebi S