前端浏览器内存监控方式

内存问题的外在表现

• 页面出现延迟加载或者经常性暂停
• 页面持续性出现糟糕的性能
• 页面性能随时间延长越来越差

监控内存的方式

1. 浏览器的任务管理器

创建一个html页面，通过点击按钮，创建一个大型数组

let btn = document.getElementsByTagName('button')
        btn[0].addEventListener('click',function(){
             arr = new Array(1000000)
        })

打开浏览器，快捷键shift+esc，可以调出浏览器的任务管理器，找到这个界面的监控,右键选上“js监控的内存"

可以看到内存占用空间和js使用的内存，内存占用空间主要观察的dom元素的变化，js使用空间监听的就是js堆上的变化
快速点击几次按钮，创建数组，可以看到js使用的内存中的实际大小会变化

2.timeLine时序图可以记录内存的变化

同样以刚才的代码测试，运行后F12调出控制台，点击performance选项，点击录制，在页面上多次点击按钮，创建数组后，停止录制，查看内存结果


可以看到内存随着时间的变化，其实就是点击之后创建数组内存飙升，随后垃圾回收，内存又被释放

3. 堆快照查找分离DOM

DOM元素并不是都在dom树上，有些dom创建之后没有添加到dom树，但却被引用，称为分离dom
创建一个循环，点击按钮之后调用循环，生成li标签，在堆快照中可以看到这些变化
首先运行代码，创建一个快照

输入detached，可以看到有一个分离dom，这是代码中创建的一个url

然后点击按钮，生成li，并将li添加到url中，再次创建快照，可以看到创建了很多li标签