vue-cesium路由跳转结果内存和gpu一直增大
开始项目中打算每个页面都有一个单独的地球实例,但是随着vue-router页面的跳转,地球的destroy也没有把内存释放,gpu也越来越高,苦思想了很久,也没有出啥。后来查资料说是cesium的内存机制有问题,所以没办法只有多个页面共享一个地球了。好吧废话不多说开始代码。
Home页面放置
<div id="viewerCon">
<cesium-viewer></cesium-viewer>
</div>
其中cesium-viewer是注册的地球组件,id为viewerCon的div作为存放组件的容器。
其他页面放置
<div class="map-c" id="xhMainCon" ref="parent"></div>
<script>
export default {
name: "xhmain",
data() {
return {
}
},
mounted() {
this.setCesium();
},
created() {},
beforeDestroy() {
this.destoryCesium();
},
methods: {
setCesium() {
//获取到3d的盒子
var cesium= document.getElementById("cesium");
var viewerCon = document.getElementById("viewerCon");
//3d在页面中的样式,可根据自己的需求进行调整
cesium.style.display = "block";
viewerCon.removeChild(cesium);
// //在本页面中的制定位置进行挂载
document.getElementById("xhMainCon").appendChild(cesium);
},
destoryCesium() {
var parent = this.$refs.parent;
var cesium= parent.firstChild;
//隐藏
cesium.style.display = "none";
//从当前页面中移除
parent.removeChild(cesium);
//重新挂载回body
var viewerCon = document.getElementById("viewerCon");
viewerCon.appendChild(cesium);
}
}
};
</script>
这样每个页面都可以存放一个地球了,而且不会随着路由跳转而使内存和gpu提升。
还有一个问题是,开始我在钩子beforeDestroy中用的是
var parent = document.getElementById(“xhMainCon”)
而不是 var parent = this.$refs.parent,
但是怎么都获取不到元素,后来打印了document才发现打印的document是页面即将跳转的document,获取的id在打印的document中不存在。
在解决问题的过程中,还是要多打印当前所要操作的元素,这样才不会浪费时间。