记录一次threejs内存泄露问题排查过程

问题描述:

一个有关地图编辑的使用threejs的这样的组件,在多次挂载销毁后,页面开始卡顿。

问题排查:

1. 首先在chrome dev tool中打开performance monitor面板,观察 JS head size、DOME Nodes、Js event listeners数据是否呈现增长趋势

观察了一段时间,发现JS head size并没有明显的增长,但是DOM Nodes、Js event listeners随着每次组件的销毁、组件的重新挂载一直呈现增加的趋势。

2. 在chrome dev tool中打开performance进行性能分析

在performance面板中我们录制大概60s性能分析

查看结果

首先我们看一下JS head size,观察到在1分钟的组件不断销毁和挂载的过程中,是收敛的,组件挂载是增长,组件卸载时释放,是正常现象。

其次我观察到DOM Nodes、Js event listeners在1分钟的组件不断销毁和挂载的过程中,呈现阶梯式的增长,且增长的幅度几乎一致,如下图。

初步分析是在组件卸载时有事件监听没有销毁。

3. 在chrome dev tool中打开memory面板中进行深层次的分析

在memory面板中,多录制几个快照

我发现heap size是不断增长的,确认是存在内存泄露的问题的。

现在我选取Snapshot5和Snapshot4进行对比,看一下,增长的是什么

注意我框出来的地方。重点看delta哪些在增长。其中 compiled code这种不用管。这是编辑好的代码。

我们看到 HTMLDivElement、EventListener、ResizeObserver、等这些的增长,都能看出来我们的分析是对的,确实很多监听事件没有清除。

接下来我们去清除这些事件,再次捕捉快照看一下对比。

解决问题

1. 确定 setTimeout、setInterval、requestAnimationFrame等在组件销毁时清除,requestAnimationFrame很容易遗漏

2. 确认 addEventListener的事件在组件销毁时移除了。

这里需要注意一下,最好通过  document.removeEventListener(eventname,fn)的方式去清除

我之前通过document.onclick = null的方式去清除,发现还是会出现内存泄露的问题。

3. threejs引入的dragControls、orbitControls、还有自己封装的controls等在组件销毁时,记得销毁这些控制器中的事件监听。比如dragControls提供了方法 deactivate 方法去清除监听。

4. 在组件销毁时确认清除了 ResizeObserver

确保了这些问题都处理后,再次用performance性能分析60s,查看结果

我们看到DOM Nodes、Js event listeners在组件销户和挂载过程中是收敛的,不会再呈现阶梯式增长。问题得到解决。

再次去memory面板中查看新的快照

我们看到清除了这些事件监听后,heap size不再增长了,我们再具体对比一下Snapshot5和Snapshot4

之前的那些增长项,都为0了。至此问题解决。

还有一个常识时,在组件销毁时,记得把threejs scene中的所以object清除了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/791153.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

函数式编程Haskell基础介绍之基础类型、Glasgow的使用

纯函数式编程是一种编程范式,它的核心思想是通过纯函数的方式来进行编程。纯函数指的是函数的输出仅依赖于输入,并且没有副作用(side effects)。换句话说,相同的输入始终产生相同的输出,而且函数不会改变任…

5.108 BCC工具之virtiostat.py解读

一,工具简介 virtiostat程序用于跟踪virtio设备以分析IO操作和吞吐量。 例如,客户端挂载了一个9pfs,而我们再也无法通过iostat命令获取IO统计信息。 在这种情况下,我们只能从VIRTIO层而不是块层获取统计信息。 示例 二,代码示例 #!/usr/bin/env pythonfrom __future__…

【C++】C++11类的新功能

👀樊梓慕:个人主页 🎥个人专栏:《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 🌝每一个不曾起舞的日子,都是对生命的辜负 目录 前言 默认成员函数 类成…

Java基于微信小程序高校体育场管理小程序

博主介绍:✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&#x1f3…

跨域问题解决方案之CORS

跨域问题解决方案之CORS 文章目录 跨域问题解决方案之CORS概述浏览器的同源策略同源的判定规则目的同源策略的限制范围 浏览器的同源策略为什么会引发跨域问题?CORS规则CORS解决方案CORS方案将请求分为两类举例简单请求预检请求总结学以致用 概述 浏览器安全的基石…

esp32控制舵机---待完善

舵机有三个引脚,分别是电源、电源GND和信号线。如下图所示: ESP32-WROOM-32E的引脚的定义如下: 图来自乐鑫官网:ESP32-DevKitC V4 入门指南 - ESP32 - — ESP-IDF 编程指南 v5.2.1 文档 硬件连接图: 待补充

Failed to resolve import “Home/components/HomeNew.vue“. Does the file exist?

错误信息 [plugin:vite:import-analysis] Failed to resolve import "/apis/home.js" from "src/views/Home/components/HomeNew.vue". Does the file exist? 错误原因 路径错误 解决方法

js的 for in 和 for of 的具体使用和区别

在 JavaScript 中,for...in 和 for...of 是用于迭代对象和数组的两种不同的循环结构。 先说结论: 推荐在循环对象属性的时候,使用for...in,在遍历数组的时候的时候使用for...of。 for...in循环出的是key,for...of循环出的是valu…

面试复盘1 - 测试相关(实习)

写在前:hello,大家早中晚上好~这里是西西,最近有在准备测试相关的面试,特此开设了新的篇章,针对于面试中的问题来做一下复盘,会把我自己遇到的问题进行整理,除此之外还会进行对一些常见面试题的…

蓝桥杯算法题:区间移位

题目描述 数轴上有n个闭区间&#xff1a;D1,...,Dn。 其中区间Di用一对整数[ai, bi]来描述&#xff0c;满足ai < bi。 已知这些区间的长度之和至少有10000。 所以&#xff0c;通过适当的移动这些区间&#xff0c;你总可以使得他们的“并”覆盖[0, 10000]——也就是说[0, 100…

scss常用混入(mixin)、@inclue

mixin和inclue的基本使用 mixin混入可以用于定义重复使用的样式&#xff0c;比如下面CSS代码 .header {display: flex;justify-content: center;align-items: center;width: 500px;height: 100px; }.footer {display: flex;justify-content: center;align-items: center;width…

Linux C++ 017-运算符重载

Linux C 017-运算符重载 本节关键字&#xff1a;Linux、C、运算符重载、匿名函数 相关库函数&#xff1a; 运算符重载的概念 对已有的运算符重新进行定义&#xff0c;赋予其另外一种功能&#xff0c;以适应不同的数据类型* 运算符重载可以发生函数重载 * 对于内置的数据类型…

动态规划详解(Dynamic Programming)

目录 引入什么是动态规划&#xff1f;动态规划的特点解题办法解题套路框架举例说明斐波那契数列题目描述解题思路方式一&#xff1a;暴力求解思考 方式二&#xff1a;带备忘录的递归解法方式三&#xff1a;动态规划 推荐练手题目 引入 动态规划问题&#xff08;Dynamic Progra…

【并发编程系列】使用 CompletableFuture 实现并发任务处理

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

Autodesk AutoCAD 2025 (macOS, Windows) - 自动计算机辅助设计软件

Autodesk AutoCAD 2025 (macOS, Windows) - 自动计算机辅助设计软件 AutoCAD 2024 开始原生支持 Apple Silicon&#xff0c;性能提升至 2 倍 请访问原文链接&#xff1a;https://sysin.org/blog/autodesk-autocad/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处…

Golang | Leetcode Golang题解之第8题字符串转换整数atoi

题目&#xff1a; 题解&#xff1a; func myAtoi(s string) int {abs, sign, i, n : 0, 1, 0, len(s)//丢弃无用的前导空格for i < n && s[i] {i}//标记正负号if i < n {if s[i] - {sign -1i} else if s[i] {sign 1i}}for i < n && s[i] >…

SQL Server 存储过程:BBS论坛(表结构文档下载及30个存储过程)

基于 Asp.Net 和 SQL Server 实现了一个BBS论坛&#xff0c;论坛功能比较强大&#xff0c;论坛大部分业务逻辑基于存储过程实现&#xff0c;记录一下。 BBS论坛存储过程清单 序号存储过程功能说明1sp_bbs_admin_add添加管理员2sp_bbs_admin_del删除系统管理员3sp_bbs_admin_m…

Spark-Scala语言实战(9)

之前的文章中&#xff0c;我们学习了如何在spark中使用RDD方法的flatMap,take,union。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵的点赞&#xff0c;谢谢。 Spark-Scala语言实战&am…

【ESP32S3 Sense接入语音识别+MiniMax模型+TTS模块语音播报】

【ESP32S3 Sense接入语音识别MiniMax模型TTS模块语音播报】 1. 前言2. 功能模块概述2.1 语音接入2.2 大模型接入2.3 TTS模块接入 3. 先决条件3.1 环境配置3.2 所需零件3.3 硬件连接步骤 4. 核心代码4.1 源码分享4.2 代码解析 5. 上传验证5.1 对话测试5.2 报错 6. 总结 1. 前言 …

C语言杂谈

努力扩大自己&#xff0c;以靠近&#xff0c;以触及自身以外的世界 文章目录 什么是定义&#xff1f;什么是声明&#xff1f;什么是赋值&#xff1f;什么是初始化&#xff1f;什么是生命周期&#xff1f;什么是作用域&#xff1f;全局变量&#xff1f;局部变量&#xff1f;size…