要实现对性能的优化,首先就要做到能合理有效地监控性能,发现哪里的性能出现问题,才能更好地去优化性能,这里我们说说如何通过chrome进行性能监控

1. 通过使用performance monitor来监控

在控制台使用ctrl+shift+p打开command menu,输入performance monitor来监听

可以监听如图的内容 这里的数据比较直观,也就不多说了

2. performance

performance是chrome控制台用来监控性能指标的一个利器

点击左上角的圆形按钮可以开始录制,按stop停止录制,就会把这段时间的性能监控反映出来,也可以通过刷新按钮重载页面,可以监控页面初始化时的性能

拿到performance的性能报告图,这里我分成四个部分来说,首先看到第一部分

第一部分

从上到下四个数据

  • FPS:主要和动画性能有关,表示每秒的帧数。上图中出现了红色的长条,说明这部分动画性能有卡帧,需要进行优化,而像下图这样,绿色长条,就说明性能还可以,而绿色长条越高,说明性能越好
  • CPU:和底部的summary对应,显示了页面加载过程中,各阶段对CPU的占用时间,占用时间越多,表示该部分越需要被优化,其中不同的颜色就对应着不同的部分,相应部分对应的内容可以在底部的summary里面看到,不同颜色含义为
    • 蓝色(Loading):网络通信和html解析
    • 黄色(Scripting):JavaScript执行
    • 紫色(Rendering):样式计算和布局,对css的解析,即重排
    • 绿色(Painting):重绘
    • 灰色(System):其他事件花费的时间
    • 白色(Idle):空闲时间
  • NET:主要显示了请求的顺序和花费的时间,深蓝色的优先级比浅蓝色高,我们也可以在下面的network查看更具体的顺序和耗时 点击network里面的内容在summary中会显示出具体的内容
  • HEAP:表示js堆内存的消耗 线的上升就表示这个时间点js执行消耗了一些内存

第二部分

我们刚刚说第一部分的内容时实际上也说到了下面三个部分的内容,接下来看看第二个部分里面内容最多的火焰图,main

火焰图的第一行表示发生的事件,下面的各行是上面事件的子项

当我们使用左上角的刷新去监控页面时,在这里会出现三条虚线,这里我们放大看看

这三条虚线各有含义

  • 蓝色:DOM加载完成
  • 绿色:开始绘制页面
  • 红色:页面加载完成

第三部分

看一下第三部分,这部分内容直观地显示了一些性能的详细信息,包括js堆内存,文档,节点,监听器和GPU

不同内容对应的颜色也已经在图中标明了,这里就不再多说

第四部分

接下来看看最后一部分

Summary

我们看下图,这里是刚才已经说过了的CPU占用时间的总结,与上面不同的是,上面展示的是一个各个部分在不同时间的消耗,而这里采取的是一个扇形图的方式,可以让我们直观地看到各个部分CPU消耗的占比,我们也就能更好地找到需要优化的内容

Bottom-Up

这里显示的是各个部分具体的内存消耗对应的一些内容,根据时间消耗的长短,反向列出事件列表, 这里也可以通过filter和分组group来更精确地找到内容 对于html的解析和css的解析我们可能做不了太多优化,更多地是看看时间消耗,把时间消耗多的那段解析减少,这里更多的是看看黄色的scripting的内容 如下图,可以看到,这里的script可以通过细分,去准确地找到消耗这些CPU的是代码中的哪一行,方便我们进行一个性能上的优化

Call Tree

以树形图的形式展示各项事件,这样事件调用跟踪会显得更为详细和直观,其他和bottom-up基本是一样的

Event Log

事件日志,可以让我们更好地看到事件的详细信息,如图 比Bottom-Up和Call Tree多了右边的内容,更详细地展示事件信息

该文章版权属于前端小黑
摘录自:https://blog.csdn.net/zemprogram/article/details/104557947

chrome浏览器控制台性能监控的更多相关文章

  1. Chrome占用CPU很高的解决办法

    Chrome占用CPU很高的解决办法 ...

  2. Google Chrome Helper CPU占用过高的解决办法

    Google Chrome Helper CPU占用过高的解决办法 ...

  3. 谷歌浏览器chrome的CPU占用率过高有三种解决办法

    谷歌浏览器chrome的CPU占用率过高有三种解决办法 ...

  4. 使用Selenium和chromedriver爬虫,导致后台chrome占用大量内存

    使用Selenium和chromedriver爬虫,导致后台chrome占用大量内存 ...

  5. 【python爬虫-碎碎念】chorme的无头浏览器(headless模式)慢很多怎么办

    【python爬虫-碎碎念】chorme的无头浏览器(headless模式)慢很多怎么办 ...

  6. 推荐 8 个超实用的谷歌 Chrome 插件,大牛都在用

    推荐 8 个超实用的谷歌 Chrome 插件,大牛都在用 ...

  7. Chrome谷歌浏览器屏蔽百度搜索右侧广告推荐方法

    Chrome谷歌浏览器屏蔽百度搜索右侧广告推荐方法 ...

  8. Chrome常用插件

    Chrome常用插件 ...

  9. 当表单自动填充_去除chrome浏览器自动添加的默认样式

    当表单自动填充_去除chrome浏览器自动添加的默认样式 ...

  10. 推荐几款我一直在用的chrome插件(下)

    推荐几款我一直在用的chrome插件(下) ...