码迷,mamicode.com
首页 > 其他好文 > 详细

使用chrome performance 查看页面性能

时间:2020-06-17 14:18:57      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:圆形   nbsp   影响   获得   ima   png   man   chrome浏览器   情况   

chrome浏览器提供的performance是常用来查看网页性能的工具。

使用方法

  • 点击面板左上方圆形按钮开始记录,然后操作页面,一段时间之后在面板上点击停止,即可得到这段操作过程的记录结果。
  • 点击面板上左上方刷新按键,可以重新加载页面并获得该过程记录结果。
  • 点击面板左上方禁止符号,可以清除记录结果。

技术图片

 

缩略图版块

缩略图中一共分为5行,从上到下依次是:

  1. FPS,表示每一秒的帧数,用来衡量页面动画的性能指标。fps图中绿色柱状越高表示体验越好。若出现红色长条则表示在该时间端出现长帧,可能影响用户体验。
  2. CPU,表示cpu的使用情况,其中颜色含义和底下的Summary模块中相同。从该行中颜色块的跨越时长可以分析哪类事件消耗的时间较长,从而找到性能瓶颈。
  3. NET,每一个颜色条表示加载一种文件。蓝色表示html文件、黄色表示js文件、紫色表示样式文件、绿色表示媒体文件、灰色表示其他资源。
  4. 缩略图,对应每一时刻页面的显示情况。通过勾选上方 Screenshots 来控制显示或隐藏。
  5. HEAP,表示堆内存使用情况。可通过勾选上访 Menory 来控制显示或隐藏。

 

使用chrome performance 查看页面性能

标签:圆形   nbsp   影响   获得   ima   png   man   chrome浏览器   情况   

原文地址:https://www.cnblogs.com/banyouxia/p/13152165.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!