我遇到了 webgl 上下文丢失/恢复的问题。
我的应用程序非常繁重，包含大量信息、图表、列表……和地图。
在地图中，我使用 webGL 以获得最佳性能。我的代码正在正确处理丢失和恢复的上下文。
我正在启动一项大型操作，该操作会导致从服务器加载数据、解析它……这有时会使浏览器失去我的 webgl 上下文。问题是上下文永远不会恢复。当我再次执行这个大操作时，我得到了恢复事件。
我认为这与内存和垃圾收集器释放时间有关。
但我真的不知道该怎么做，以及如何解决这个问题。
【问题讨论】：
标签： javascript memory webgl
处理丢失的方法可能是重新创建画布并为 GL 部分重新初始化您的应用程序。最后，所有资源都消失了，因此重新创建上下文所增加的开销应该不会太麻烦，您可以在 webglcontextlost 事件到达时立即采取行动。
（虽然不确定这是否是最好的主意......）
评论 Raziza 关于 WEBGL_lose_context 的回答：
不要像你在那里提议的那样使用这个。这个扩展只是一个调试工具，应该只用来模拟这种行为。
（另见此处：https://www.khronos.org/registry/webgl/extensions/WEBGL_lose_context/）
顺便说一句：点赞，这样我就可以得到积分，并可能很快对答案发表评论；）
【讨论】：
找到了一种手动调用恢复上下文的方法。不知道这样做是否好/聪明，但它对我有用。
我们通过使用扩展名WEBGL_lose_context 来做到这一点。
MDN reference
// Loading the extension
var ext = gl.getExtension("WEBGL_lose_context");
...
// This code in the context lost event, wait 3 secs for forcing
// restore context
var restoreTimeout = setTimeout(function() {
ext.restoreContext();
}, 3000);
...
// This code in restore context event
// incase we got restore not from my timeout, i'm canceling it
restoreTimeout && clearTimeout(restoreTimeout);
【讨论】：
webglcontextlost 的事件处理程序中调用 event.preventDefault() 根本没有按预期恢复上下文，使用 ext.restoreContext() 有效，但前提是您在触发上下文丢失事件之前设置了ext = gl.getExtension("WEBGL_lose_context");。 （否则调用扩展返回null）
.restoreContext() 仅在上下文因手动使用 .loseContext() 而丢失时才有效，否则（在自然情况下）它不会做任何事情。它是专门为模拟失去上下文而制作的。 来自the docs：如果上下文没有通过loseContext() 丢失，则生成INVALID_OPERATION 错误。
event.preventDefault() 一样简单。但它不起作用。 .restoreContext() 绝对不会做任何事情，除非你在它之前手动调用 .loseContext()。