Js性能优化-Performance使用

1,716 阅读2分钟

「这是我参与11月更文挑战的第11天,活动详情查看:2021最后一次更文挑战

前言-为什么使用Performance???

  • GC的目的是为了实现内存空间的良性循环
  • 良性循环的基石是合理使用
  • 时刻关注才能确实是否合理
  • Performance提供多种监控方式 主要目的就是为了通过Performance进行程序内存实时监控,这样我们可以在程序出现问题的时候快速发现问题所在,及时定位。

Performance使用步骤

前置条件:

Google Chrome(我想应该没有人会没有吧???)

  1. 打开浏览器输入目标网址 这里我们选用的是掘金 开始进行分析

  2. 进入开发人员工具面板,选择性能

image.png 3. 开启录制功能,访问具体界面

image.png 4. 执行用户行为,一段时间后停止录制

image.png 5. 分析界面中记录的内存信息

ok通过上面几个步骤我们以及获取到了部分的性能消耗啦!接着---

image.png 我们勾选上图中的图标,也就是内存,接着进行分析:

image.png 由黑色框包裹起来的部分就是我们的内存消耗,我们可以看到我们的掘金网址的内存消耗还是很正常的,有升,有降低说明内存的消耗和释放是很正常的。

当然Performance并不是这么简单的使用;如果就这么简单那不是太傻了吗?

image.png 大家看图中一共分为5行,分别是:

  1. FPS,表示每一秒的帧数,用来衡量页面动画的性能指标。
  2. CPU,表示cpu的使用情况,颜色块的跨越时长可以分析哪类事件消耗的时间较长,从而找到性能瓶颈。
  3. NET,每一个颜色条表示加载一种文件。
  4. 缩略图,对应每一时刻页面的显示情况。
  5. HEAP,表示堆内存使用情况。

当然我们还可以从下面的Event Log中发现我们的脚本调用顺序,和调用时间,对我们之后进行优化还是有很大帮助的!

image.png