Kayce Basques
了解如何使用 Chrome 和 DevTools 查找影响网页性能的内存问题，包括内存泄漏、内存膨胀和频繁的垃圾回收。
摘要
- 使用 Chrome 任务管理器了解您的网页使用了多少内存。
- 通过时间轴录制功能直观呈现一段时间内的内存用量。
- 使用堆快照找出分离的 DOM 树（内存泄漏的常见原因）。
- 通过分配时间轴记录，了解 JS 堆中何时分配了新内存。
- 确定由 JavaScript 引用保留的已分离元素。
概览
按照 RAIL 性能模型的精神，您在提升性能方面的工作重点应放在用户身上。
内存问题很重要，因为用户通常能感知到这些问题。用户可能会通过以下方式感知内存问题：
- 网页的性能会随着时间的推移而逐渐变差。这可能是内存泄露的症状。内存泄漏是指网页中的 bug 导致网页随着时间的推移而逐渐使用越来越多内存的情况。
- 网页的性能一直很差。这可能是内存膨胀的症状。内存膨胀是指网页使用的内存超出了实现最佳网页速度所需的内存。
- 网页的性能延迟或似乎经常暂停。这可能是频繁进行垃圾回收的症状。垃圾回收是指浏览器回收内存的过程。浏览器会决定何时发生这种情况。在收集期间，所有脚本执行都会暂停。因此，如果浏览器进行大量垃圾回收，脚本执行将会频繁暂停。
内存膨胀：什么是“过多”？
内存泄漏很容易定义。如果某个网站的内存用量逐渐增加，则说明存在内存泄漏。但内存膨胀要难以确定一些。什么情况属于“占用内存过多”？
这里没有具体的数字，因为不同设备和浏览器的功能各不相同。在高端智能手机上顺畅运行的网页在低端智能手机上可能会崩溃。
这里的关键是使用 RAIL 模型并专注于用户。了解用户常用的设备，然后在这些设备上测试您的网页。如果体验一直很差，则表示网页可能超出了这些设备的内存容量。
使用 Chrome 任务管理器实时监控内存用量
使用 Chrome 任务管理器作为内存问题调查的起点。任务管理器是一款实时监控工具，可让您了解网页的内存用量。
按 Shift+Esc 或前往 Chrome 主菜单，然后依次选择更多工具 > 任务管理器以打开任务管理器。