性能监测介绍

  • Performance工具
  • 使用步骤
  • 内存问题的现象
  • 监控内存的方式
  • 任务管理器监控内存
  • Timeline记录内存
  • 堆快照查找分离DOM
  • 分离DOM的说明
  • 案例
  • 判断是否存在频繁GC


Performance工具

它是一个可以时刻监控内存的工具。

使用步骤

1、浏览器输入目标地址
2、F12选择性能
3、开启录制功能，访问具体页面
4、执行用户行为后，一段时间后停止录制
5、查看分析界面中记录的内存信息

内存问题的现象

1、页面出现延迟加载或经常性暂停（可能在频繁的出现垃圾回收）
2、页面持续性出现糟糕的性能（可能出现内存膨胀）
3、页面的性能随着时间延长越来越差（可能出现内存泄漏）

监控内存的方式

内存泄漏：内存使用持续升高，始终不下降
内存膨胀：当前应用本身为了达到最大的效果，需要申请一定的内存空间，该空间超过了设备本身的内存空间
频繁垃圾回收：通过内存变化图进行分析

1、浏览器的任务管理器
2、Timeline时序图记录
3、堆快照查找分离DOM
4、判断是否存在频繁的垃圾回收

任务管理器监控内存

查看图中红色圈住的实时变化值，如果数字一直变大，没有变小，就意味着内存消耗过大

java scriptenginemanager java scriptenginemanager 性能优化_Time

Timeline记录内存

精确定位到内存有问题的代码位置

java scriptenginemanager java scriptenginemanager 性能优化_Time_02

堆快照查找分离DOM

分离DOM的说明

1、界面元素存活在DOM树上
2、脱离DOM树的节点，并且JS代码中也没有对该DOM节点的引用，那么它就是垃圾DOM
3、脱离DOM树的节点，并且JS代码中有对该DOM节点的引用，那么它就是分离DOM

案例

let tmpEle;
    const list = [];
    const btnDOM = document.querySelector('#btn');
    btnDOM.onclick = function (){
        const ul = document.createElement('ul')
        for (let i = 0; i < 10; i++) {
            const li = document.createElement('li')
            ul.appendChild(li)
        }
        // ul没有渲染在页面上，但是ul被tmpEle变量引用着，那么ul就是分离DOM，可能会造成内存泄漏
        tmpEle = ul
    }

java scriptenginemanager java scriptenginemanager 性能优化_内存泄漏_03

判断是否存在频繁GC

GC在工作的时候应用程序是停止执行的，频繁且过长的GC会导致应用假死，用户使用的体验会感觉到应用的明显卡顿。
方式：
1、Timeline中时序图频繁的上升下降
2、任务管理器中数据频繁的增加减小