浏览器 Performance 工具的使用

一、内存问题的体现

在假设网络没有问题的前提下

• 页面延迟加载，经常性的暂停
• 页面持续性出现糟糕的性能
• 页面在使用过一段时间，出现卡顿。

二、内存的问题

• 内存泄漏：内存使用持续升高，没有下降的节点，证明代码中存在内存泄漏问题。
• 内存膨胀：内存的膨胀的鉴定首先需要确认时设备的问题，还是程序的问题。如果在多个主流设备上，程序都出现了糟糕的表现，可以确定为内存膨胀的问题。
• 频繁的进行GC操作：通过内存变化图可进行分析

三、监控内存的方式

1. 任务管理器监控内存

2. Timeline 记录内存

3. JS 堆快照查找分离DOM

**堆快照：**就是给 JS堆 拍一张照片，该照片记录着 内存空间存储的信息

**分离DOM：**分离DOM不存在DOM树上，但是代码中仍然对DOM节点还有引用，此时分离的DOM还在内存中是占据空间的。

 // 通过点击按钮可以创建了一个ul标签里面存储10个li元素，然后让全局doms变量引用这个dom元素。
    const btn = document.querySelector('#btn')
    let doms = null
    function fn() {
      console.log('执行了啊啊啊')
      const ul = document.createElement('ul')
      for (let i = 0; i < 10; i++) {
        ul.appendChild(document.createElement('li'))
      }
      doms = ul
    }
    document.addEventListener('click', fn)

点击前堆中的存储信息：
通过搜索detached关键字来找到堆快照中的分离

因为点击事件还没有触发，所以JS堆快照中没有找到分离元素。

触发点击事件，再次记录JS堆:
在内存堆中找到了仍然被全局变量引用的的分离DOM

主动将分离DOM进行释放掉，此时内存堆中就不存在这些分离的DOM，写代码的时候需要注意这点。

4. 判断是否存在频繁的GC

频繁的GC所带来的问题：

• GC 工作时应用程序会暂停
• 频繁过长的GC会导致应用程序假死
• 会被用户感知到

如何判断是否存在频繁的GC

• 通过分析任务管理器进行分析
• 通过Timeline时序图 看看 内存使用情况走势图是否是忽上忽下，并且内存使用情况的水平图很短暂。