2.7 内存(Memory)面板

2.7.1 内存使用分析

Memory面板是Chrome DevTools中的一个重要工具，用于帮助开发者监控和分析网页的内存使用情况，从而识别并解决内存泄漏和性能问题。以下是关于如何通过Memory面板进行内存使用分析的详细讲解：
1. 打开Memory面板
在Chrome浏览器中，打开开发者工具（可以通过按F12键或右键点击页面元素选择检查来打开）。
在开发者工具中，切换到Memory选项卡。
2. 监控内存使用情况
在Memory面板中，你可以看到一个实时的内存使用情况图表，它展示了页面内存使用的变化趋势。
通过与页面进行交互（如点击按钮、滚动页面等），观察内存使用情况图表的变化，以了解哪些操作可能导致内存使用增加。
3. 识别内存泄漏
内存泄漏是指应用程序在使用完内存后未正确释放，导致内存占用不断增加的现象。
在Memory面板中，你可以通过比较不同时间点的内存快照来识别内存泄漏。如果发现某个对象或数据结构在内存快照中持续存在且其内存占用不断增加，那么可能存在内存泄漏问题。
4. 分析内存分配
Memory面板还提供了内存分配事件的记录功能，通过记录内存分配事件，你可以分析页面中的内存分配情况，找出内存分配过程中的性能瓶颈。

点击Record按钮开始记录内存分配事件，执行一系列操作后，点击Stop按钮停止记录。然后，你可以查看和分析记录的内存分配事件，找出可能的性能问题。

2.7.2 堆快照

堆快照是Memory面板中的一个重要功能，它允许你创建当前页面内存中的对象及其关系的快照，以便进行进一步的分析。
1. 创建堆快照
在Memory面板中，点击Take snapshot按钮（或选择Heap snapshot并点击Start按钮）来创建堆快照。
快照创建完成后，它会被加载到DevTools中，并显示在快照列表中。
2. 分析堆快照
堆快照提供了多种视图来帮助你分析内存中的对象及其关系，包括摘要视图（Summary view）、比较视图（Comparison view）、包含视图（Containment view）和支配者视图（Dominators view）等。
摘要视图：按构造函数名称分组显示对象，并显示对象的数量、浅尺寸（Shallow Size）和保留尺寸（Retained Size）等信息。
比较视图：显示两个快照之间的差异，帮助你找出在操作前后内存使用情况的变化。
包含视图：允许你探索堆内容的对象结构，帮助分析全局命名空间周围的引用关系。
支配者视图：显示支配者树，帮助你发现对象在删除/垃圾回收之前是否有外部引用。
通过分析堆快照，你可以识别出未释放的对象、循环引用等内存问题，并采取相应的措施来解决这些问题。
示例：
假设你怀疑一个网页存在内存泄漏问题，你可以按照以下步骤使用Memory面板进行分析：

• 打开Chrome DevTools并切换到Memory面板。
• 点击Record按钮开始记录内存使用情况，执行一系列可能导致内存泄漏的操作（如频繁地添加和删除DOM元素）。
• 操作完成后，点击Stop按钮停止记录，并创建堆快照。
• 在快照列表中选择刚刚创建的堆快照，并使用不同的视图来分析内存中的对象及其关系。
• 查找未释放的对象或循环引用等内存问题，并根据分析结果修改应用程序代码以解决这些问题。