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