背景

当您关闭浏览器选项卡时，所有内存都将被释放。内存泄漏在Web浏览器上很可能不是大问题。但是如果你有一个长时间运行的应用程序，它可能是一个问题。这是关于如何检测Web浏览器上的内存泄漏的说明。在本说明中，我将使用示例来展示如何在开发工具上使用内存功能。我注意到Chrome和Edge上的开发工具是最容易使用的。

拍摄堆快照

在Chrome或Edge开发工具中，我们可以采用三种内存配置文件。

在这篇笔记中，我将重点关注“堆快照”，它非常有效地精确定位导致内存泄漏的对象。测试HTML页面如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><style>button {height: 60px;border-radius: 5px;font-weight: 800;background-color: aquamarine;}</style>
<title>Memory test - first attempt</title><script>
let MTestClassesArray = [];class MTestClass {constructor() {}
}const create_1000_objects = () => {for(let i = 0; i < 1000; i++) {MTestClassesArray.push(new MTestClass());}const text = `Total ${MTestClassesArray.length} `+ `MTestClass objects created`;document.getElementById('divMsg').innerHTML = text;
};</script></head><body><button onclick="create_1000_objects()">Create 1000 MTestClass objects</button><div id="divMsg" />
</body>
</html>

在这个HTML页面中，我们有一个按钮。
每次单击按钮，都会创建1000个“MTestClass”类型的对象。
每个对象都插入到数组“ MTestClassesArray”中。
由于数组“MTestClassesArray”是在全局范围内声明的，因此对象不再是可垃圾回收的。

为了验证上述陈述，让我们加载页面并单击几次按钮。在我的实验中，我使用了Edge。

正如页面中所示，我已单击该按钮3次，并创建了3000 个“MTestClass”对象。我们可以通过“CTRL+SHIFT+i”调出开发工具。在获取内存快照之前，让我们首先强制进行垃圾回收。

然后我们可以在垃圾收集之后拍摄内存快照。

内存快照使我们能够很好地了解内存堆。

我们可以过滤快照以检查某些类类型的对象是否在内存堆中。在我们的示例中，我们可以看到正好3000个“ MTestClass”对象。
我们还可以看到是什么对象阻止了“ MTestClass”对象被垃圾收集。在我们的示例中，它是“MTestClassesArray”对象。

开发工具甚至可以告诉我们哪一行代码创建了“MTestClass”对象。

一个真实世界的例子——AsyncSubject

如果您订阅了一个事件，则需要取消订阅它。如果没有，很可能是内存泄漏。但是rxjs中的 "AsyncSubject"是这样吗？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><style>button {height: 60px;border-radius: 5px;font-weight: 800;background-color: aquamarine;}</style>
<title>Memory test - async subject</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.1.0/rxjs.umd.js"></script><script>
const get_time = () => {const element = document.getElementById('divTime');const subject = new rxjs.AsyncSubject();element.innerHTML = '';setTimeout(() => {subject.next(new Date());subject.complete();}, 3 * 1000);subject.subscribe((data) => {element.innerHTML = data.toString();});
};    </script>
</head><body><button onclick="get_time()">Get Time by AsyncSubject</button><div id="divTime"></div>
</body>
</html>

在这个HTML页面中，我们有一个按钮。
点击按钮，页面上会显示当前时间。
我没有直接获取时间，而是创建了一个“AsyncSubject”，时间是在定时器回调函数中获取的。
然后程序订阅“AsyncSubject”并将其显示在页面上。

需要注意的是，“AsyncSubject”是在“get_time”箭头函数中创建的，因此与任何全局上下文无关。我将假设它在计时器回调之后是可垃圾回收的。但是让我们确认它正在使用开发工具。

单击按钮和显示时间之间有3秒的延迟。为了确认“AsyncSubject”是可垃圾回收的，让我们拍两个堆快照。一个在定时器回调之前，一个在定时器回调之后。

在定时器回调之前，我们可以在内存堆中找到“AsyncSubject”。此时，它不是垃圾回收的，因为它被一些其他资源保留并且最终可以从window对象访问。

但是在定时器回调之后，AsyncSubject收集了“ ”。如果没有收集，您可以手动强制收集。通过这个例子，我们可以对我们的程序更有信心。如果“ AsyncSubject”使用正确，我们不需要取消订阅该事件。

附加说明

已经注意到，如果你曾经“console.log()”一个对象，它就不再是可垃圾回收的。在生产版本中，如果您有内存问题，您应该记住这一点。
在堆快照中搜索对象时，如果您的程序被缩小，则可以通过缩小器更改类的名称。

兴趣点

这是关于如何检测Web浏览器上的内存泄漏的说明。
开发工具对于我们了解内存堆非常有用。
我希望你喜欢我的文章，我希望这篇笔记能以一种或另一种方式帮助你。

Detect Memory Leak on Web Browsers - CodeProject

检测Web浏览器上的内存泄漏相关推荐

Flutter 上的内存泄漏监控
一.前言 Flutter 所使用的 Dart 语言具有垃圾回收机制,有垃圾回收就避免不了会内存泄漏.在 Android 平台上有个内存泄漏检测工具 LeakCanary[1], 它可以方便地在 deb ...
在 Web 浏览器上进行 RSS 阅读
在 Web 浏览器上进行 RSS 阅读 WHY RSS ? 简单几步在你的 Web 浏览器上开启 RSS 阅读之旅制作 RSS 附录:主流浏览器扩展商店网址推荐阅读与参考文献 RSS (RDF S ...
web浏览器上画图之raphael
最近进了一家新公司,由于项目需要,老总让我研究在web浏览器上如何画图并获取所画的图形的相关数据(一般是坐标),在网上找了很多资料,最终经过筛选,觉得以下这几种方式用得较多,并且简单的总结了一下他们的 ...
spring mvc重定向_Spring的Web MVC –重定向到内存泄漏
spring mvc重定向他们说一块岩石会引起雪崩. 最近,我的一位同事Marcin Radoszewski给了我一块岩石. 您可能永远不会猜到它是什么,但是有机会在许多Web应用程序中使用它. 请 ...
Spring的Web MVC –重定向到内存泄漏
他们说一块岩石会引起雪崩. 最近,我的一位同事Marcin Radoszewski给了我一块岩石. 您可能永远都不会猜测它是什么,但是有机会在许多Web应用程序中使用它. 请允许我向您介绍这块石头. ...
手把手教你在Android-Studio上分析内存泄漏，面试必会
导语本文的目的很简单,一句话:用最少的时间,最高效率,让你清楚:想要做Android开发,你需要学什么?你该在哪学? 本文的特点在于将繁琐的知识化为系列专题的形式展现给读者,当你能跟随博主构建的体系 ...
在web浏览器上显示室内温度（nodeJs+arduino+socket.io）
上次的nodejs操作arduino入门篇中实现了如何连接arduino.这次我们来实现通过arduino测量室内温度并在浏览器上显示出来. [所需材料] 硬件:LM35温度传感器,arduino u ...
谷歌浏览器上启用flash_如何在任何Web浏览器上启用私人浏览
谷歌浏览器上启用flash Private browsing has been around in one form or another since 2005, but it took some t ...
前端 -＞ Plupload 一个Web浏览器上的界面友好的文件上传模块
文章目录方法列表: 属性集合: 事件集合:(up为uploader缩写) 实例: 方法列表: Uploader(setting):创建实例的构造方法 var uploader = new plupl ...

检测Web浏览器上的内存泄漏

背景

拍摄堆快照

一个真实世界的例子——AsyncSubject

附加说明

兴趣点

检测Web浏览器上的内存泄漏相关推荐

最新文章

热门文章