vue2+cesium加载3dtile导致卡顿内存溢出
问题
vue2中在cesium上做倾斜摄影模型加载后页面会非常卡顿,排查模型加载代码后发现都没有问题。
但是在vue3框架搭建的项目中就没有问题。
具体表现为 CPU和内存爆满,内存持续不断大幅度上涨。页面表现为卡顿异常
PS:如果文档图片显示不出来,可能是cdn加速出现问题,请开启梯子后再试
过程
查看性能分析可知 在模型加载这一块非常消耗资源
所以刚开始是怀疑模型或其他动画加载时导致的耗时异常,排查后发现也没有问题。
后来网上搜索到一篇 vue+cesium加载3dtiles模型内存消耗很大 文章,开始怀疑是vue2框架双向绑定导致的异常。
1.页面初始化时,会对data()里面的viewer进行双向绑定。
2.在 如 new Cesium.Viewer
等语句创建一个实例赋值给viewer后,新的viewer对象会触发双向绑定,将遍历viewer对象中每一个可枚举属性同时进行双向绑定。
3.众所周知cesium对象中的属性非常之多,遍历一遍需要消耗一定的资源。如果当你在cesium地图中移动一下视角等操作(甚至不用做任何操作,cesium地图会动态加载地图层)就会导致cesium对象发生变化触发双向绑定(订阅-发布),进一步消耗计算资源。(上图中3.中的 ze() 函数是处理不可枚举属性的,这里不做讨论)
解决办法
将拥有很多属性的超大对象放置在全局,不放入data()函数中。
参考网址
__EOF__

本文作者:damarkday知识库
本文链接:https://www.cnblogs.com/GoodMemoryBlog/p/17520725.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
本文链接:https://www.cnblogs.com/GoodMemoryBlog/p/17520725.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~