让前端飞JavaScript 进阶营

记录一次离谱的JS内存泄漏

2023-07-12  本文已影响0人  来一斤BUG

1. 事情起因

最近做用Electron做了一款应用,它有两个窗口,姑且叫它们主窗口子窗口。某次偶然的情况下,我从开发者工具的性能监视器里看到了子窗口的内存占用在不断升高,甚至到最后内存溢出,整个渲染进程崩溃了。

性能监视器

2. 查找问题

在查找问题之前,我们先来了解一下js的内存回收机制。js引擎有一个垃圾回收器来定期检查不被引用的对象,然后释放它们所占用的内存空间。所以,子窗口内存不断升高必然是产生了许多被引用的对象,亦或是某个对象(特别是Map、Set、数组等)的内容越来越多。
经过一顿查找,没有发现哪个对象占用空间有异常,我只好通过注释掉代码来看看是哪一行代码导致内存升高的。一开始注释了好几行,都不是它们的问题,直到我注释掉一行console.log语句,哦豁,内存不再升高了!
console.log()方法只是往控制台打印内容,那么为什么它能让内存占用一直升高呢?子窗口有个功能,需要通过Ipc从主窗口多次获取数组,而我写的console.log语句是为了在控制台中打印这些数组,以便查找问题。正是由于这个打印,让console.log引用了这些数组,原本应该用完即扔的数组就变成了一直被引用的对象,js内存回收机制对它们束手无策,只能任由内存占用不断升高。
当然,最后的解决方法就是删掉这句console.log,等真正需要打印的时候再写回去就行了。

上一篇下一篇

猜你喜欢

热点阅读