JavaScript 如何管理内存

开发 前端 存储
最近有很多同学在面试中都被问到了 JS在浏览器中的内存管理逻辑,JS 的内存管理本质上是一个非常复杂知识点。所以咱们今天就专门花上几分钟的时间,来看看 JS在浏览器中的内存管理逻辑。

内存影响性能。当你的应用程序代码消耗太多内存时,你会得到一个卡顿的应用程序,甚至可能会出现内存耗尽的崩溃。

当你在web浏览器中运行一个应用程序时,大部分应用程序内存存储在Javascript堆中,而这个堆位于计算机的RAM内。在 Vue 或者 React 应用程序的上下文中,存储在JS堆中的常见对象包括:组件实例、虚拟DOM,以及如果你使用状态管理工具(Vuex、Pinia、Redux、mobx)的话,包含 State、Action 等。

当你与一个应用程序进行交互时,JS堆可能会随着时间的推移而增长。你可以通过使用Chrome DevTools进行剖析时观察到这种增长。

我在浏览 Medium 首页几秒钟后拍摄了上面的截图。

由于内存增长会影响应用程序的性能,因此清除未使用的内存以释放空间非常重要。Javascript引擎回收未使用内存的过程称为垃圾回收(GC)。与某些语言(如C和C++)不同,Javascript引擎会自动进行垃圾回收。

让我们从Chrome开始分析。

Javascript 与 Major GC 和 Minor GC

Major GC 和 Minor GC

Major GC( 主垃圾回收器 ):主要负责老生代的垃圾回收;

Minor GC( 副垃圾回收器 ):主要负责新生代的垃圾回收;

在浏览器中能找到他们(Major GC、Minor GC)之间的工作身影:

  • JS HEAP SIZE 明显降低的时候,必是Major GC在工作

  • 反观 Minor GC,则没 Major工作这么明显,但是Minor GC工作会比Major频繁得多

Javascript使用 Major GC 和 Minor GC 清理JS堆

打开Chrome开发者工具,并导航到性能(Performance)选项卡,确保选中“内存(Memory)”复选框。

这是Chrome分析器生成的配置文件:

你可以看到堆的大小会增长和缩小。如果你仔细观察,你会发现堆大小的下降与垃圾回收活动是对应的。"Major GC" 表示正在进行一次主要的垃圾回收。

当JS堆大小大幅下降时,你很可能会在任何网站上看到这种模式。事实上,如果你在单页应用程序中切换标签页时,JS堆的大小没有显著减少,但标签页的内容有所不同,这可能是内存泄漏的迹象。

在剖析中,你还会看到“Minor GC”帧。

这些 Major GC 和 Minor GC 帧向你揭示了一些关于Javascript中垃圾回收的信息。

  • 垃圾回收有两种类型:Major GC 和 Minor GC。
  • Minor GC 通常很短暂,而 Major GC 则需要更长的时间。
  • 在“任务”下看到它们作为帧的事实表明它们都在主应用程序线程上运行。
  • 因为它们在主线程上运行,它们会阻塞Javascript执行,因为浏览器只有一个主线程来运行你的Javascript代码。
  • 由于它们阻塞了Javascript执行,过多的GC会影响应用程序的性能。

注意:GC 只有在某些时候会阻塞Javascript执行。它并不是一直阻塞,而是在显示为帧时。我们在Chrome分析器中无法看到这一点,但在Firefox分析器中可以看到。

现在让我们来看看Firefox分析器,它也揭示了Major GC和Minor GC之间的差异。

Major GC和Minor GC清理JS堆的两个不同部分

我不是Firefox的用户,我之所以将Firefox下载到我的笔记本电脑上,仅仅是因为它的剖析功能。Firefox的剖析器是开源的,并且比Chrome的剖析器有更多的可视化功能。

录制一个剖析文件,并导航到“Marker Chart”可视化。Marker Chart本质上是所有不同类型活动的时间轴,包括垃圾回收活动。

你可能会注意到的第一件事是,Minor GC 发生频率相当高,而 Major GC 则不是。这是有很好的原因的,因为如前面所述,Minor GC 很短暂,而 Major GC 则需要更长的时间。

如果你将鼠标悬停在一个 Minor GC 切片上,你会得到以下描述:

因此,除了它们以不同的频率运行外,Major GC 和 Minor GC 还清理JS堆的不同部分。

如上所述,Minor GC 清除了所谓的“苗圃集合(nursery collection)”。 如果对象在 Minor GC 中幸存下来,它们就会从 Nursery 移动到“终身(tenured)”堆或“长期(long-lived)”堆上。 因此,Major GC 必定是清除永久堆的对象。

Major GC通过一种名为mark—and—sweep的算法来清理永久化的堆,我们稍后将介绍该算法。

现在我们知道 JS 堆至少有 2 个组件:

  • 一个用于最近分配的对象的苗圃集合(nursery collection)
  • 一个用于长期存在的对象的永久堆。(“终身(tenured)”堆或“长期(long-lived)”堆)

主要GC算法(增量标记和清除)

Marker Chart 最后一行的屏幕截图中还有一个 GCSlide。 嗯,那是什么?

如果将鼠标悬停在 Major GC 矩形上,你会看到 Major GC 的描述:

整个Major GC花费了580毫秒。然而,正如描述所说,主线程仅在个别切片上被阻塞。因此,最后一行的GCSlide指的是这些阻塞切片。再往下看,你会发现总切片时间是34.4毫秒,因此在Javascript主线程无法执行应用程序代码时,只有34.4毫秒的工作。

如果你将鼠标悬停在其中一个GC切片上,你会得到:

请注意,两个工具提示都有“标记阶段”和“清除阶段”。这意味着Javascript垃圾回收有两个阶段:标记和清除。这个算法称为标记-清除。请注意,GC切片的描述中提到了“增量垃圾回收的一个切片”。增量GC是实现标记-清除算法的一种方式。

标记阶段通过遍历对象图来“标记”所有从根集合(例如全局变量、活动函数调用)可达的对象。然后,清除阶段“扫描”整个堆,收集并释放所有未标记的对象的内存,这些对象被视为不可达,因此是垃圾。

增量意味着你在标记阶段以增量方式进行操作,从而最小化主线程被阻塞的时间。

Chrome vs. Firefox

当涉及到Javascript中的垃圾回收时,我想提出一些细微差别。

Chrome(以及NodeJS)使用V8 Javascript引擎。

另一方面,Firefox使用一个名为SpiderMonkey的不同引擎。正是Javascript引擎带来了垃圾回收。V8使用术语“young generation”代替“nursery”,以及“old generation”代替“tenured heap”。然而,V8和SpiderMonkey都使用Minor GC来清理年轻对象和Major GC来清理老对象。

两者都实现了增量标记-清除算法用于Major GC。不过,具体的 增量标记-清除算法 在V8和SpiderMonkey之间有所不同。

总结一下:

责任编辑:华轩 来源: 程序员Sunday
相关推荐

2020-12-29 08:09:25

JavaScript内存管理

2021-01-07 07:53:10

JavaScript内存管理

2023-02-20 15:27:30

开发JavaScript内存管理

2021-08-05 15:28:22

JS内存泄漏

2019-06-24 19:00:09

JavaScript内存泄漏垃圾回收

2017-10-26 08:43:18

JavaScript内存处理

2022-05-26 09:51:50

JavaScrip内存泄漏

2011-07-28 11:12:25

Cocoa 内存

2018-03-01 16:25:52

Linux内核内存管理

2020-07-28 08:10:33

Linux内存虚拟

2016-05-25 10:03:51

JavaScript内存泄露

2011-08-16 17:43:47

Objective-C内存管理Autorelease

2019-09-24 08:56:00

内存Redis使用

2023-11-19 22:31:00

内存程序

2013-10-11 17:32:18

Linux运维内存管理

2018-07-23 09:26:08

iOS内存优化

2020-06-08 09:18:59

JavaScript开发技术

2018-12-06 10:40:50

磁盘缓存内存

2009-06-10 22:03:40

JavaScript内IE内存泄漏

2023-10-18 13:31:00

Linux内存
点赞
收藏

51CTO技术栈公众号