引入腾讯地图，电脑内存CPU占比升高，卡顿问题

最近在做一个项目，需要应用腾讯地图，但是每当进入包含腾讯地图的页面，电脑内存占比就会持续升高，没过几次，电脑就会变的非常卡顿，

这是没有进入地图页面之前的内存占比：

这是进入地图页面几次后的内存占比，并且该内存占比并不会下降的很快，对于一般的笔记本而言就会造成非常严重的卡顿问题。

 查询了许多资料都没有找到相对应的解决方法，最后还是前辈一针见血的指出问题，可能是地图实例被多次创建，占用大量缓存的问题，找到问题所在就非常容易解决问题了，这里有两种方式：

1、可以通过对地图的DOM节点进行删除的操作，在页面退出销毁之前，清除地图所在的DOM节点，可以通过v-if进行实现

2、这一种是比较推荐的方式，在腾讯地图官方文档中查找销毁地图实例的方法，可以通过map.destroy()方法，在页面销毁之前进行地图实例的销毁

map.destory()

再次进入地图页面可以看到，电脑的内存占比不会持续升高，会维持在一个固定的范围，并且在退出页面之后，内存的释放也非常迅速，不会造成应用网站的卡顿现象。

除此之外，除了内存的升高，在地图组件或者其他组件引入的时候还要注意cpu的占用情况，此处非常注意，在使用需要加载大量资源创建实例的组件的时候，不论是什么项目，以vue为例，尽量不要将创建的实例存储在data中，这样会在进入该页面的时候占用耗费大量资源，导致网页应用卡顿，如图：

 上图可以看到，cpu的占用耗费是非常高的，并且难以下降

这里有一个解决办法，就是在vue页面内声明一个全局变量用来接收实例对象，在页面的销毁的时候在进行释放，这样操作会有效减少cpu的占用情况，提升网页应用运行速率。

以上仅为个人见解