JavaScript性能优化(二)--Performance的使用

209 阅读1分钟

image.png

Performance

  • 时刻监控内存

使用步骤

  • 打开浏览器输入目标网址
  • 进入开发人员工具面板,选择性能
  • 开启录制功能,访问具体界面
  • 执行用户行为,一段时间后停止录制
  • 分析界面中记录的内存信息

界定内存问题的标准

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

监控内存的几种方式

  • 浏览器任务管理器 Shift+Esc,只能判断内存问题是否存在,无法定位 image.png
  • Timeline时序图记录 image.png
  • 堆快照查找分离DOM image.png 存在分离的DOM image.png
  • 判断是否存在频繁的垃圾回收: Timeline中频繁的上升下降,任务管理器中数据频繁的增加减小 GC工作时程序时停止的,过长的GC会导致假死,出现卡顿的现象

Performance使用

  • Performance使用流程
  • 内存问题的相关分析
  • Performance时序图监控内存变化
  • 任务管理器监控内存变化
  • 堆快照查找分离DOM