如何解决webgl context数量限制问题？

Question

因为浏览器对webgl context数量的限制，导致3d可视化插件超过16个之后（同一浏览器窗口，不同浏览器页签），前面创建的可视化组件就会丢失webgl context，这个问题要如何解决。
我目前使用的解决方案是切换页签之后就让切换前的页签的可视化组件释放web context，切换到的页签再重新创建webgl context，但是这样会导致可视化组件出现卡顿（会有一个重新加载的过程），而且3d组件的相机角度也会被重置。
出现问题的页面效果如下：


使用的两个可视化组件分别是：

• ngl: 用来展示3D分子结构
• plotly: 用来展示3D图表

使用的前端框架是vue
目前使用的解决方法的代码：

  mounted() {
    document.addEventListener("visibilitychange", e=>{
      //隐藏标签
      if(document.visibilityState === "hidden"){
        if (!this.plotlyClosed) {
          plotly.purge(this.divId)
          this.plotlyClosed = true
        }
      }
      //切换显示标签
      if(document.visibilityState === "visible"){
        if (this.data.length !== 0) {
          if (!this.plotlyClosed) {
            plotly.purge(this.divId)
          }
          if (this.dimension == 3) {
            this.drawPlot3D(this.data, this.divId)
          } else {
            this.drawPlot2D(this.data, this.divId)
          }
        }
      }
    })
  },