java scriptenginemanager java scriptenginemanager 性能优化

性能监测介绍

• Performance工具

• 使用步骤

• 内存问题的现象
• 监控内存的方式
• 任务管理器监控内存
• Timeline记录内存
• 堆快照查找分离DOM

• 分离DOM的说明
• 案例

• 判断是否存在频繁GC

Performance工具

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

使用步骤

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

内存问题的现象

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

监控内存的方式

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

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

任务管理器监控内存

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

Timeline记录内存

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

堆快照查找分离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
    }

判断是否存在频繁GC

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