若要查找影响页面性能的内存问题,包括内存泄漏、内存膨胀和频繁垃圾回收,请使用以下工具:
- Microsoft Edge 浏览器任务管理器。
- 性能工具的内存复选框。
- 内存工具的各种分析类型。
用于调查内存使用情况的工具
| 用例 | 工具 | 文章 |
|---|---|---|
| 实时监视网页使用了多少内存。 | Microsoft Edge 浏览器任务管理器 | (浏览器任务管理器) 实时监视内存使用情况 |
| 可视化一段时间内网页的内存使用情况。 | 性能 工具 >内存 复选框 | 可视化内存泄漏 (性能工具: 性能功能参考中的内存复选框) 。 |
| 发现频繁的垃圾回收。 | Microsoft Edge 浏览器任务管理器或 性能 工具 >内存 复选框 | Microsoft (Edge 浏览器任务管理器、性能工具的内存复选框) 发现频繁的垃圾回收 。 |
| 检查网页使用的内存内容。 | 内存 工具 >堆快照 | 使用内存工具记录堆快照 (“堆快照”分析类型) |
| 了解在一段时间内创建了哪些 JavaScript 对象,以隔离内存泄漏。 | 内存 工具 >时间线上的分配 | 在时间线上使用分配检测 (“时间线上的分配”分析类型) |
| 了解哪些 JavaScript 函数在一段时间内分配内存。 此配置文件类型的性能开销极低,可用于长时间运行的操作。 | 内存 工具 >分配采样 | 加速 JavaScript 运行时 (“分配采样”分析类型) |
| 查找 DOM 树内存泄漏。 | 内存 工具 >分离的元素 | 调试 DOM 内存泄漏 (“分离的元素”分析类型) |
内存工具
用于调查内存问题的主要工具是 内存 工具:
内存工具中的“分离元素”配置文件:
要返回到分析类型的选项按钮列表,请在内存工具的左上角单击配置文件 (配置文件
) 。
修复内存问题概述
本着 RAIL 性能模型的精神,性能工作的重点应是用户。
内存问题很重要,因为它们通常容易被用户感知。 用户可以通过以下方式感知内存问题:
随着时间的推移,页面的性能会逐渐变差。 这可能是内存泄漏的症状。 内存泄漏是指页面中的 bug 导致页面随着时间的推移逐渐使用越来越多的内存。
页面的性能始终很差。 这可能是内存膨胀的症状。 内存膨胀是指页面使用的内存超过了最佳页面速度所需的内存。
页面性能延迟或似乎频繁暂停。 这可能是频繁垃圾回收的症状。 垃圾回收是指浏览器回收内存。 浏览器将决定何时发生这种情况。 在收集期间,将暂停所有脚本运行。 因此,如果浏览器大量进行垃圾回收,脚本运行时将暂停很多。
内存膨胀:多少才算“太多”?
内存泄漏的定义非常简单。 如果站点逐渐使用越来越多的内存,那么您就有泄漏。 但内存膨胀有点难以确定。 什么属于“使用过多内存”?
这里没有硬数字,因为不同的设备和浏览器具有不同的功能。 在高端智能手机上流畅运行的同一页面可能会在低端智能手机上崩溃。
这里的关键是使用 RAIL 模型并关注用户。 找出哪些设备最受用户欢迎,然后在这些设备上测试你的页面。 如果体验一直不佳,则页面可能超出这些设备的内存容量。
(Microsoft Edge 浏览器任务管理器、性能工具的内存复选框) 发现频繁的垃圾回收
如果您的页面似乎经常暂停,则您可能遇到了垃圾回收问题。 要发现频繁的垃圾回收,可以使用:
Microsoft Edge 浏览器任务管理器。 频繁上升和下降 内存 或 JavaScript 内存 值表示频繁的垃圾回收。 请参阅 (浏览器任务管理器) 实时监视内存使用情况 。
性能工具的内存复选框。 在性能内存记录中,JS 堆或节点计数图) (上升和下降的频繁变化表明垃圾回收频繁。 请参阅性能功能参考中的“查看内存指标”。
使用其中任一工具确定问题后,可以使用 内存 工具的“ 时间线上的分配 ”分析类型来找出内存的分配位置,以及导致分配的函数。 请参阅 在时间线上使用分配检测 (“时间线上的分配”分析类型) 。
查找分离元素中的 DOM 树内存泄漏
只有当 DOM 树或页面上运行的 JavaScript 代码都没有引用节点时,DOM 节点才会由浏览器进行垃圾回收。 从 DOM 树中删除节点时,称为“分离”,但某些 JavaScript 仍会引用它。 分离的 DOM 节点是内存泄漏的常见原因。
用于调查分离元素的工具
| 用例 | 工具 | 文章 |
|---|---|---|
| 仅将分离的元素显示为 DOM 树节点。 | 内存 工具 >分离的元素 分析类型 | 调试 DOM 内存泄漏 (“分离的元素”分析类型) |
| 显示内存中的所有对象,筛选以显示分离的元素,并带有指向 JavaScript 源代码的链接。 | 内存 工具 >堆快照 分析类型 >已分离 | 查找 DOM 树内存泄漏 (“堆快照”分析类型>使用内存工具记录堆快照中的分离) (“堆快照”分析类型) . |
另请参阅
外部:
- 使用 Chrome DevTools 查找和调试 JavaScript 中的内存泄漏 - Gonzalo Ruiz de Villa) (的幻灯片组,这也适用于 Microsoft Edge DevTools。
注意
此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面可在 此处 找到,作者为 Kayce Basques。
本作品根据 知识共享署名 4.0 国际许可证获得许可。