526互联

项目中多次调用百度地图组件然后页面出现自动刷新的问题——Too many active WebGL contexts. Oldest context will be lost

发布时间 2023-08-19 12:22:08作者: 星宝攸宁

最近在项目中遇到这么一个奇怪的问题，在调用百度地图组件之后页面会不定期的自动刷新，后来经过排查发现问题是因为内存泄漏的原因： Too many active WebGL contexts. Oldest context will be lost。

是因为chrome浏览器对单个页面能运行的WebGL上下文是有限制的，例如PC上的chrome或firefox也就运行十五六个，手机平板等移动终端会更受限，因此如果出现内存泄露老的上下文没关闭，

超越上限时就会出现类型WARNING: Too many active WebGL contexts. Oldest context will be lost.的异常。

解决的方案就是在每次离开页面前将地图销毁。 map.destroy()

具体代码根据实际情况来，比如我的是如下引用，如下销毁： 

<moreGrid :businessList="leftList" :houtData="houtData" mapId="thingId" :isBusiness="isBusiness" ref="thingHotMap"
            :policeArea="policeArea" :gridArea="gridArea" :isShowGrid="isShowGrid" :isShowPolice="isShowPolice" @clickGrid="clickGrid"></moreGrid>
beforeDestroy(){
        this.$refs.thingHotMap.map.destroy()
    },