常见问题

内存膨胀

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

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

内存泄漏

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

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

频繁垃圾回收

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

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

内存分析

内存占用空间 ：操作系统内存，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如果观测到频繁的内存上升下降，则是频繁垃圾回收