threejs 创建了10w条THREE.Line,销毁数据,等待了10秒

three + 高德地图,绘制路线,数据量比较大,路由切换时,需要把threejs创建的对象销毁。 简单粗暴的方法,直接卡顿几秒才可以切换,体验极差。

默认销毁代码

ini 复制代码
this.roadGroup.children.forEach(item => {
    this.roadGroup.remove(item);
    item.geometry && item.geometry.dispose();
});

此时卡顿的时候,打印了下children的长度接近10w个,销毁占用时间,阻塞了。

想到不耽误销毁数据,又不影响其他进程,那就异步分批销毁,比如每次销毁300个。这样不一直占用主线程,静默销毁数据,解决。

修改后的代码

ini 复制代码
const destroyRoadGroup = function (callback) {
    if (this.roadGroup) {
        let group = this.roadGroup;

        let index = 0;
        const batchSize = 300; // 每批处理多少个对象
        const delay = 1; // 每批之间延迟时间(ms)

        let children = group.children;
        const disposeBatch = () => {
            const end = Math.min(index + batchSize, children.length);
            for (let i = index; i < end; i++) {
                const obj = children[i];
                if (obj.geometry) {
                    obj.geometry.dispose();
                }
                if (obj.material) {
                    if (Array.isArray(obj.material)) {
                        obj.material.forEach((mat) => mat.dispose());
                    } else {
                        obj.material.dispose();
                    }
                }
            }

            index = end;

            if (index < children.length) {
                setTimeout(disposeBatch, delay); // 下一批
            } else {
                // 所有资源释放完毕
                group.clear(); // 清空 group 内容
                group = null;
                if (callback) callback();
            }
        };

        disposeBatch();
    }
};
相关推荐
泷羽Sec-静安42 分钟前
Less-1 GET-Error based-Single quotes-String GET-基于错误-单引号-字符串
前端·css·网络·sql·安全·web安全·less
小时前端1 小时前
虚拟DOM已死?90%内存节省的Vapor模式正在颠覆前端
前端·html
Keepreal4961 小时前
Web Components简介及如何使用
前端·javascript·html
jump6801 小时前
TS中 unknown 和 any 的区别
前端
无羡仙1 小时前
AI终于‘看见’网页了!Stagewise让UI修改从‘盲调’变‘指哪打哪
前端
柯腾啊2 小时前
“Script error.”的产生原因和解决办法
前端·javascript·浏览器
沙漠之皇2 小时前
ts 定义重复对象字段
前端
HashTang3 小时前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
前端架构师-老李3 小时前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
一只学java的小汉堡3 小时前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html