最近公司项目，加载模型之后一直导致浏览器崩溃，用的是vue+cesium写的，这个问题之前遇见，然后一直以为是加载的相机太多导致崩溃，现在终于找到原因了
公司加载的模型，原本是gltf的，然后因为three.js加载出来之后gltf需要下载完才能加载出来，所以放弃了，现在改用cesium，因为cesium加载的模型可以有分批加载，然而对于一直在用three.js来说，用cesium有点难，需要重新把所有的东西都要看下，今天先不讲这个，主要先讲下崩溃问题
对于vue来说，这些问题导致内存增加，而我就因为这个走了很多弯路，现在总结下心得，以便大家以后少走弯路
注意事项：
1.对于创建的n多个元素，尽量避免重复赋值，生成，导致n多的Object，从而导致内存飙升，这个因素影响不大，但是如果元素过多的话，就不一定了，所以出现问题的时候可以看下，看是不是多拉了几份，我们这个项目里面的时候，因为后台给的时候的数据没有排序，然后我就拉了一份数据，来排序，然后呢，我们的数据里面有状态字段，所以根据字段来筛选，然后又创建了好几个数组放，从而弄了多个数组，属于又拉出了一份数据
解决方法：这个呢是我经过这次想出来的方法，可以把后台拉出来的数据，循环的时候给他一个状态，然后根据这个字段来进行分类，每次获取的时候就可以少创建几次了
2.对于第二个问题，就是属于最重要的问题了，因为vue中有一个watch监听，所以我在这次项目中使用的一个变量，放到了vue的data里面，从而使页面加载进来之后，一加载然后因为cesium使用的3dtileset加载的模型，基本都是属于分批加载的，所以就导致文件加载进来的时候vue中创建的那个变量放置3dtileset的变量，一直加载，一直在变化，从而导致watch监听一直在走，然而，因为模型的原因，每次加载的里面都有图片等数据，所以导致不用多久，就会出现崩溃，就算刚开始没有崩溃，而后来一只用鼠标旋转或者放大，就会导致崩溃
解决方法：把这个3dtileset的变量直接拉到全局，然后问题就解决了，原本模型加载占用内存只需要1-3G的，切换之后所用的内存只用300-500兆，而且还是超大的一个模型：
网友评论