WebGL上下文丢失是浏览器主动丢弃GPU资源导致绘图失效，需监听webglcontextlost（须preventDefault）和webglcontextrestored事件，并完整重建着色器、缓冲区、纹理等所有GPU资源。
WebGL 上下文崩溃（即上下文丢失）不是“JavaScript 崩溃”，而是浏览器主动丢弃 GPU 资源导致绘图能力暂时失效——图表白屏、动画卡住、控制台报 CONTEXT_LOST_WEBGL 错误，都属于这一现象。处理核心不是捕获 JS 异常，而是监听并响应两个专用事件，再重建渲染管线。
监听上下文丢失与恢复事件
必须在获取 WebGL 上下文后，立即为 <canvas> 绑定两个事件，且顺序和细节不能出错：
-
丢失事件（webglcontextlost）：触发时需调用
event.preventDefault()，否则浏览器不会后续触发恢复事件 - 恢复事件（webglcontextrestored）：在此回调中重新初始化所有 GPU 资源，不能复用旧对象
示例代码：
const canvas = document.getElementById('chart-canvas');const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
if (gl) {
canvas.addEventListener('webglcontextlost', (e) => {
e.preventDefault(); // 关键！必须阻止默认行为
console.warn('WebGL context lost — pausing render loop');
}, false);
canvas.addEventListener('webglcontextrestored', () => {
console.log('WebGL context restored — reinitializing...');
initWebGLResources(gl); // 重载着色器、缓冲区、纹理等
startRenderLoop(); // 恢复动画帧循环
}, false);
}
重建资源不能跳步，要完整走初始化流程
上下文恢复后，gl 对象虽可继续使用，但所有之前创建的 GPU 对象（缓冲区、纹理、着色器程序、帧缓冲）全部失效。不能只重传数据，必须从头重建：
立即学习“Java免费学习笔记（深入）”；
- 重新编译并链接着色器程序（
gl.createShader→gl.compileShader→gl.linkProgram） - 重新创建顶点缓冲对象（VBO）、索引缓冲对象（IBO），并用
gl.bufferData上传新数据 - 若用到纹理（如热力图贴图、图标图集），需重新调用
gl.texImage2D或gl.texSubImage2D - 重设 viewport、clear color、启用/禁用状态（如
gl.enable(gl.DEPTH_TEST)）
建议把上述步骤封装进一个 initWebGLResources(gl) 函数，与首次初始化共用同一套逻辑，避免遗漏。
配合图表库时注意生命周期管理
如果你用的是 ECharts、Three.js、Deck.gl 或自研图表引擎，需确认其是否内置上下文恢复机制：
- ECharts 5.4+ 支持
renderer: 'webgl'并自动监听上下文事件，但需确保未手动销毁实例；调用chart.dispose()后需重新echarts.init() - Three.js 的
WebGLRenderer在 v128+ 已内置恢复逻辑，但前提是未设置preserveDrawingBuffer: true（该选项会显著降低性能且干扰恢复） - 自研渲染器务必在
webglcontextrestored中调用renderer.setSize()和renderer.setPixelRatio()，否则图表可能缩放错乱或模糊
预防性优化能大幅降低丢失频率
虽然无法完全避免上下文丢失，但可减少触发概率：
- 移动端页面添加
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">，避免双指缩放引发渲染压力突增 - 禁用
preserveDrawingBuffer: true（默认为 false），它强制保留帧缓冲，增加显存压力 - 定期调用
gl.getError()检查错误，在着色器报错或状态异常时提前降级（如切回 Canvas2D 渲染） - 对长时运行的图表，每 30 秒主动检查
gl.isContextLost()（部分浏览器支持），及时响应潜在问题
