chrome performance性能检测面板
chrome performance性能检测
参考
https://developer.chrome.com/docs/devtools/evaluate-performance/(主要参考,很多直接翻译的官方文档)有些图是官方的,有些自己截得
https://zhuanlan.zhihu.com/p/163474573
https://blog.csdn.net/weixin_33674976/article/details/91390874
操作面板
开始、清空
三个按钮功能:
1、点击开始分析
2、开始分析并重新加载页面
3、清空报告
当点击1、2按钮都会开始记录分析,只是第二个按钮会先重载页面后才开始记录。开始记录后会弹出下方弹框,
Status: 状态,记录中
Time: 记录时间
Buffer usage: 缓冲区使用。当缓冲区已满时,Chrome 会尝试有选择地记录日志,但会丢失很多事件。 缓冲区填充的速率取决于页面上发生的情况,页面简单和复杂会产生不同的缓冲区填充率。
上传、下载
除了这两个按钮,在performance界面鼠标右键也会出现加载和保存菜单。
1、加载记录文件,需要上传一个json文件
2、保存记录文件,格式如下
选择分析报告
可选择展示当前和近期的分析报告
几个多选框
1、Screenshots
屏幕截图,勾选后报告会显示当前时间页面截图
2、Memory
记录当前时间下的堆、文档、节点、监听器、GPU内存。可以看到上方的HEAP表和下方的JS Heap曲线是对应的。如果曲线一直增长,说明存在内存泄漏。也可以通过浏览器的任务管理器查看各页面内存情况,如果内存一直增加就说嘛可能存在内存泄漏,超过一定程度就会导致页面崩溃。
3、Web Vitals
可衡量用户体验的标准,颜色绿->橙->红,绿色性能好,橙色需要提高,红色性能差。
Core Web Vitals
1、Cumulative Layout Shift (CLS)累计布局偏移,衡量页面整个生命周期内发生的每个意外布局偏移的最大布局偏移分数的度量,应该<0.1
2、First Input Delay (FID)首次输入延迟,应该在100ms内
3、Largest Contentful Paint (LCP)最大内容绘制时间,应该在2.5s内
Other Web Vitals
1、First Contentful Paint (FCP)首次内容绘制时间
2、Time to First Byte (TTFB)服务器响应时间
垃圾回收
垃圾回收,垃圾是指程序不再使用的,但还占用的内存。它工作在引擎内部,所以点击后其实前端并没有什么直接感受。
捕获设置
点击会展开以下选项
1、Disable javascript samples: 禁用 javascript 示例 ,默认main部分会显示调用的 JavaScript 函数的详细调用堆栈,勾选后会禁用这些调用堆栈。打开后生成的main部分会短很多,因为省略了调用堆栈
2、Enable advanced paint instrumentation: 启用高级绘画工具,点击frames部分,会在详情layers部分显示布局信息。
3、Network: 设置当前网络加载速度,默认不节流。可选离线和快慢3G
4、CPU:设置当前CPU运算速度,默认不节流。可选四倍和六倍减速
可视报告
所有表中都是深黄色代表脚本活动,紫色事件代表渲染活动。
最上方是时间轴,可以通过区域选择某个时间范围内的数据。鼠标前滚缩小,后滚放大,也可手动空值具体分析哪个时间段的数据
FPS
Frames Per Second,每秒传帧数(帧率,刷新率), FPS 上方出现红色条时,就意味着帧率下降得太低,可能会损害用户体验。 一般来说,绿色条越高,FPS 越高,画面越流畅,用户体验就越好。当然过高也不好,分辨率不变的情况下,FPS越高,则对显卡的处理能力。
小Tips
点击进入并勾选 Frame Rendering Stats
会在页面左上方出现这样一个实时统计,方便我们查看fps,GPU内存,对于对动画有性能要求的页面是非常有用的。
当然这里还有很多其他选项可以尝试,方便我们查看网页性能等。
CPU
CPU 图表中的颜色对应于“性能”面板底部“摘要”选项卡中的颜色,如果图表充满颜色,说明CPU长时间处于最大值状态,需要减轻负担
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3GlgRWDH-1632646625321)(https://developer-chrome-com.imgix.net/image/admin/XFtPfdKzTPBXeQC9g9OC.svg)]
NET
Network
记录资源加载和网络请求等
请求的颜色编码如下:
- HTML:蓝色
- CSS:紫色
- JS:黄色
- 图片:绿色
请求左上角的深蓝色方块表示它是一个更高优先级的请求。浅蓝色方块表示优先级较低。
一个请求可分为四个部分
1、最左端的线|-表示Connection Start
,是在请求发送前的所有内容
2、请求方块浅色的部分表示Request Sent
请求发送和Waiting (TTFB)
服务器响应时间。
3、请求方块最右端的深色部分是Content Download
表示内容下载花费
4、最右侧的一条线是等待主线程花的时间
一般在Network选项卡选择某一个请求,可在右侧看到该请求的具体信息,其中Timing tab除了上文第四条都有展现。开根据其判断是否需要优化。
Frames
记录每个时间段的fps,红色部分表示掉帧(baidu: 硬件不足以负荷显示器画面动态显示刷新的频率,从而帧率过低所造成的画面出现停滞(或短时间或长时间)现象)。
开启了操作栏的Screenshots,这里也会展示每个时间的界面截图,方便查看页面变化
Interactions
记录用户交互
Main
x轴表示时间轴,每个条形代表一个事件,越宽代表花费时间越长。y轴表示调用堆栈,高的事件调用低的事件。
按住shift单机并拖动,可查看这部分的耗费时间
颜色
来自一个脚本的函数调用为浅绿色。来自另一个脚本的调用是米色的.
与
Summary
图表一致,深黄色代表脚本活动,紫色事件代表渲染活动当条形右上角上出现红色三角形时表示可能存在与此事件相关的问题的警告。 (每当执行 requestAnimationFrame() 回调时,就会发生 Animation Frame Fired 事件。 )
选中某一个事件块,可通过键盘箭头切换
例如:
Schedule Style Recalculation
:重新计算样式
Raster
光栅,记录光栅化线程
GPU
方块表示何时有使用GPU加速,宽度表示使用时间
详情
一般点击上方分析图的小方块,此处数据就会显示当前点击部分的具体情况。
summay摘要
主要统计当前各模块使用时间。(大部分可意会)这里列举部分
- scripting:js执行,(可能还分自身执行,孩子执行(如引入的文件))
- system:系统运行
- other: 其他
- idle: 浏览器闲置
Bottom-Up
执行的事件,可以看到各活动占用的时间。Self Time 表示直接花费的时间,Total Time表示在该活动和其所有子活动花费的时间。
可以看到该事件是执行的微任务,包含了重新计算样式+布局+调用方法+请求状态改变+解析html。后面是相关代码的文件,点击即可进入对应位置查看具体操作
Call Tree
调用树,查看根活动(根活动是那些导致浏览器做一些工作的活动。例如,当单击一个页面时,浏览器会触发一个Event
作为根 Activity 的 Activity。这Event
可能会导致处理程序执行,等等。其在Main,call Tree 、Event Log都是最高级)
我这个就是一个点击事件没有后续的调用。
展开后成为一个树形结构
最右侧存在按钮Show Heaviest Stack点击后可查看最重堆栈
Event Log
事件日志
Layers
勾选高级绘画工具,选择frames中一块,就能看到layer,选择中心布局某块会与左侧联动。选择左侧dom会与页面联动。
其他
ctrl+F打开搜索框,可以使用正则表达式进行查找,上下箭头切换,也可选择是否区分大小写(Aa按钮)
chrome performance性能检测面板相关推荐
- 怎样用谷歌浏览器测试软件性能,chrome插件:网站性能检测工具lighthouse
chrome浏览器扩展程序lighthouse可以检测网页的质量,分别针对网页的Performance.Accessibility.Best Practices.SEO进行检测评分,并给出相应的优化建 ...
- 前端性能检测Performance
前端性能检测Performance https://developer.mozilla.org/zh-CN/docs/Web/API/Performance Performance 接口可以获取到当前 ...
- 页面性能检测插件(Chrome)
今天尝试装了一下YSlow插件,尝试了几次没有成功,偶然间发现Chrome里面有一个功能类似的整合插件 All-In-One PageSpeed Test Test your page perform ...
- 前端性能优化 - chrome performance看浏览器渲染过程
1. 浏览器渲染的过程 最近一直想看看浏览器渲染以及前端性能优化的内容,可是在网上找到的都是文字描述,所以想通过网上的知识去对应到chrome performance看到的过程. 先看一个非常简单的页 ...
- 如何对页面进行简单的性能检测与分析
本文首发于:https://github.com/bigo-frontend/blog/ 欢迎关注.转载. 前言 页面性能的好与坏,直接影响到用户的留存.对于前端开发者来说,不能以感官的体验进行判断, ...
- 前端动画优化及性能检测
前端动画优化及性能检测工具使用 前端使用动画可以分为两类: css 动画 js 动画 我们提倡能够使用 css 完成的动画尽量使用 css ( 即使用 animation 和 keyframes ). ...
- 如何使用Lighthouse性能检测工具
前言 最近做性能检测工具,很多知识点不清楚,打算查缺补漏,补一补. 接下来从官方提供的性能检测工具Lighthouse(灯塔)开始我们的学习,简单介绍了下Lighthouse的一些点. 阅读完本文,你 ...
- 初识Chrome Performance
Chrome Performance工具文章网上一搜一大把,但是作为一个刚入门的前端小白,我还是觉得自己整理一下(抄的),来加深理解. 网上很多文章都是使用官网提供的DEMO了进行分析的.大概 ...
- 前端搞工程化:从零打造性能检测库「源码 + 视频」
工程化体系专栏永远首发自我的 Github,大家可以关注点赞,通常会早于发布各大平台一周时间以上. 本文涉及到的源码及视频地址: 源码 视频,因为制作肯定比文字需要的时间多,所以本周才会更新完毕,大家 ...
最新文章
- 解决Failed to execute goal org.apache.maven.plugins
- mysql 返回最大值列名_多列求最大值列和列名
- css 右上角 翻开动画_css简单动画(transition属性)
- mysql group_concat distinct,如何在MySQL中使用GROUP_CONCAT和CONCAT与DISTINCT引用单列值?...
- go 打印结构体对象,结构体指针
- ggplot2之配对数据差异比较及结果可视化
- 版本为2.5的OpenMP的所有API函数
- MySQL初始化安装部署
- zepto.js学习笔记01
- JAVA IO之管道流总结大全(转)
- 编程入门指南:零基础如何自学编程?
- 基于ssm宠物医院管理系统获取(java毕业设计)
- 在excel 同时冻结行和列
- 固态硬盘量产工具_固态硬盘测速工具CDM更新8.0版,但我们不推荐你使用
- 系统集成项目管理工程师(项目经理)笔记
- 离散数学学习笔记-01-随机试验与随机事件
- 数据挖掘-python数据分析与挖掘实战
- 我的JS OO如是观
- 《拳皇15》先导预告 多位角色回归、细节下月公开
- 视频通话和聊天工具Jitsi