• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

浏览器开发者工具之JavaScript内存监控(Performance)

互联网 diligentman 3小时前 1次浏览

为什么要使用Performance

GC的目的是为了实现内存空间的良性循环
良性循环的基石是合理使用
即刻关注才能确定是否合理
Performance提供多种监控方式

内存问题的表现

网络环境是正常的,且👇

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

定义内存问题的标准

内存泄漏:内存使用持续升高
内存膨胀:在多数设备上都存在性能问题
频繁垃圾回收:通过内存变化图进行分析

监控内存的几种方式

1. 浏览器任务管理器

快捷键shift+ESC
浏览器开发者工具之JavaScript内存监控(Performance)
第一列是DOM内存;最后一列是堆内存

2. Timeline时序图记录 ⭐

通过Performance时刻监控内存,可定位到出现问题的代码块

浏览器开发者工具之JavaScript内存监控(Performance)
浏览器开发者工具之JavaScript内存监控(Performance)
浏览器开发者工具之JavaScript内存监控(Performance)
在在蓝色时序图可以清楚的看见该页面的效果和发生变化的时间,可以控制查看
浏览器开发者工具之JavaScript内存监控(Performance)

3. 堆快照查分离DOM ⭐

什么是分离DOM

界面元素存活在DOM树上
垃圾对象时的DOM节点
分离状态的DOM节点

什么是垃圾对象的DOM

脱离DOM树,且没有任何引入

内存泄漏

脱离DOM但是有引用,在页面中是看不见的,内存里是占据空间的

通过堆快照找到,并手动修改清除释放

找到js堆,对照片留存,可以看到里面的所有信息
浏览器开发者工具之JavaScript内存监控(Performance)
浏览器开发者工具之JavaScript内存监控(Performance)

4. 判断是否存在频繁的垃圾回收

GC工作时应用程序是停止的
频繁且过长的GC会导致应用假死
用户使用中感知应用卡顿

监控方法

通过Timeline中频繁的上升下降
任务管理器中数据频繁的增加减小


程序员灯塔
转载请注明原文链接:浏览器开发者工具之JavaScript内存监控(Performance)
喜欢 (0)