常见问题

内存膨胀

现象：内存使用过多，表现为网页性能一直很糟糕

排查：内存上限的衡量受限于设备性能，需要收集用户喜欢使用的设备机型，在目标机型上进行网页体验测试，如体验不佳则存在内存使用过多

内存泄漏

现象：网页性能随着使用时间越来越差

排查：查看 JS 堆内存使用，关注垃圾回收节点，JS 内存持续增长或 DOM 不符合预期的持续增长，则存在内存泄漏

频繁垃圾回收

现象：网页出现延时或经常暂停。垃圾回收期间所有脚本都会暂停

排查：观测到内存使用的频繁上升下降则存在频繁垃圾回收

内存分析

Chrome 任务管理器查内存量

Chrome-更多工具-任务管理器

如果没有 JavaScript 内存需要右击开启

• 内存占用空间：操作系统内存，DOM 节点就存储在操作系统里。此值增大说明正在创建 DOM
• JavaScript 内存：JS 堆内存，实际大小表示可访问对象正使用的内存。此值增大说明正在创建对象或对象正在增长

JS 查看内存

window.performance.memory

• jsHeapSizeLimit：JS 堆栈内存大小限制
• totalJSHeapSize：包括任意对象和空闲内存的 JS 堆内存
• usedJSHeapSize：包括 V8 对象的所有 JS 对象的堆内存

Performace monitor 监控内存量

Performance 录制内存变化

勾选 Memory 后开始录制，点按“扫把图标”强制垃圾回收，可测试内存泄漏等问题

Memory 查看内存情况

堆快照 Heap snapshot

当前内存使用情况快照，可以筛选“Detached”已分离 DOM 节点（JS 引用导致无法回收的 DOM 节点）造成的内存泄漏，排查选中的节点被什么位置的什么变量引用

• Shallow Size：浅层大小，对象本身内存大小（不包含内部引用的其他内存）
• Retained Size：保留大小，对象完整的内存大小（包含内部引用内存）

Comparison

两个快照之间可以使用 comparison 视图比对变化

• New：新创建的对象个数
• Deleted：删除的对象个数
• Delta：发生变化的对象个数，净增数
• Alloc.Size：已分配的内存
• Freed Size：新对象释放出的内存
• Size Delta：发生变化的内存，净增内存

分配时间线 Allocations on timeline

录制新内存分配情况，关注分配时间段的内存具体数据，查找对象被分配到的位置

分配采样 Allocation sampling

按 JS 函数查看分配情况

已分离元素 Detached elements

查看确切的已分离 DOM 节点和数量

排查频繁垃圾回收

任务管理器和 Performance 如果观测到频繁的内存上升下降，则是频繁垃圾回收