admin管理员组文章数量:1580425
最近在做一个项目,需要应用腾讯地图,但是每当进入包含腾讯地图的页面,电脑内存占比就会持续升高,没过几次,电脑就会变的非常卡顿,
这是没有进入地图页面之前的内存占比:
这是进入地图页面几次后的内存占比,并且该内存占比并不会下降的很快,对于一般的笔记本而言就会造成非常严重的卡顿问题。
查询了许多资料都没有找到相对应的解决方法,最后还是前辈一针见血的指出问题,可能是地图实例被多次创建,占用大量缓存的问题,找到问题所在就非常容易解决问题了,这里有两种方式:
1、可以通过对地图的DOM节点进行删除的操作,在页面退出销毁之前,清除地图所在的DOM节点,可以通过v-if进行实现
2、这一种是比较推荐的方式,在腾讯地图官方文档中查找销毁地图实例的方法,可以通过map.destroy()方法,在页面销毁之前进行地图实例的销毁
map.destory()
再次进入地图页面可以看到,电脑的内存占比不会持续升高,会维持在一个固定的范围,并且在退出页面之后,内存的释放也非常迅速,不会造成应用网站的卡顿现象。
除此之外,除了内存的升高,在地图组件或者其他组件引入的时候还要注意cpu的占用情况,此处非常注意,在使用需要加载大量资源创建实例的组件的时候,不论是什么项目,以vue为例,尽量不要将创建的实例存储在data中,这样会在进入该页面的时候占用耗费大量资源,导致网页应用卡顿,如图:
上图可以看到,cpu的占用耗费是非常高的,并且难以下降
这里有一个解决办法,就是在vue页面内声明一个全局变量用来接收实例对象,在页面的销毁的时候在进行释放,这样操作会有效减少cpu的占用情况,提升网页应用运行速率。
以上仅为个人见解
版权声明:本文标题:引入腾讯地图,电脑内存CPU占比升高,卡顿问题 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1727871726a1134819.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论