内存问题的外在表现
- 页面出现延迟加载或者经常性暂停
- 页面持续性出现糟糕的性能
- 页面性能随时间延长越来越差
监控内存的方式
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标签