大前端— 可视化方式的内存管理

内存问题的外在表现：

1. 页面出现延迟加载，或经常性暂停，不断地内存溢出，然后回收，频繁垃圾回收
2. 页面持续性出现糟糕的性能， 不断地申请新的内存，内存膨胀
3. 页面的性能随时间延长越来越差，内存泄漏

如果出现以上的表现的话，就可以看一看是否是内存出现问题了

如何可视化内存的情况呢？

1、任务管理器

   

这里的 实际大小 就是之前 js 内存 里面写的 可达内存

2、timeline时序图记录

点击开始录制，然后开始一波操作，就是有一个用户来使用则一个网页

然后点击 停止，就可以看到 生成了一堆的 快照

这里的js 呈现很典型的 城墙一样的形状，就是出现了上文所说的频繁回收垃圾

这里还可以专门看 dom 节点 的内存情况，没错了，dom 的内存一直在上升

3、堆快照查找分离dom

   分离 dom，不在界面上，但是 存在内存中，

很典型的就是 vue 中的 keep-alive 组件了，就是将当前 页面的 vue 实例 存储到一个对象之中，然后使用 页面的 name 等属性作为key。然后等到 需要复用了，就用 key 去重新拿出来就好了

而 vue 实例之中的 el ，就是 一个 真实的dom 节点

 

4、判断是否存在频繁的垃圾回收

1.    timeline 是否频繁的 上升降低
2.   任务管理器里面是否 频繁的 增大减小