Chrome性能分析工具的使用
运行时性能表现(runtime performance)指的是当你的页面在浏览器运行时的性能表现,而不是在下载页面的时候的表现。这篇指南将会告诉你怎么用Chrome DevTools Performance功能去分析运行时性能表现。在RAIL性能评估模型下,你可以在这篇指南中可以学到怎么去用这个performance功能去分析Response, Animation, 以及 Idle 这三个性能指标。
一、模拟移动设备的CPU
移动设备的CPU一般比台式机和笔记本弱很多。当你想分析页面的时候,可以用CPU控制器(CPU Throttling)来模拟移动端设备CPU。
在DevTools中,点击 Performance 的 tab。
确保 Screenshots checkbox 被选中
点击 Capture Settings(⚙️)按钮,DevTools会展示很多设置,来模拟各种状况
对于模拟CPU,选择2x slowdown,于是Devtools就开始模拟两倍低速CPU
在DevTools中,点击 Record 。这时候Devtools就开始录制各种性能指标
进行快速操作,点击stop,处理数据,然后显示性能报告
二、分析报告
FPS(frames per second)是用来分析动画的一个主要性能指标。让页面效果能够达到>=60fps(帧)/s的刷新频率以避免出现卡顿。能保持在60的FPS的话,那么用户体验就是不错的。
为什么是60fps?
我们的目标是保证页面要有高于每秒60fps(帧)的刷新频率,这和目前大多数显示器的刷新率相吻合(60Hz)。如果网页动画能够做到每秒60帧,就会跟显示器同步刷新,达到最佳的视觉效果。这意味着,一秒之内进行60次重新渲染,每次重新渲染的时间不能超过16.66毫秒。
三、界面介绍
从上到下分别为4个区域
1:具体条,包含录制,刷新页面分析,清除结果等一系列操作
2:overview总览图,高度概括随时间线的变动,包括FPS,CPU,NET
3:火焰图,从不同的角度分析框选区域 。例如:Network,Frames, Interactions, Main等
4:总结区域:精确到毫秒级的分析,以及按调用层级,事件分类的整理
【Overview】
Overview 窗格包含以下三个图表:
1、FPS。每秒帧数。绿色竖线越高,FPS 越高。 FPS 图表上的红色块表示长时间帧,很可能会出现卡顿
2、CPU。 此面积图指示消耗 CPU 资源的事件类型。黄色的表示对js的操作所占内存(js代码评估及函数调用),蓝色表示对html操作所占的内存(主要是html编译),紫色表示对css操作所占的内存(css样式计算等),灰色表示其他操作所占的内存
3、NET。每条彩色横杠表示一种资源。横杠越长,检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间(从请求资源到第一个字节下载完成的时间)
可以放大显示一部分记录,以便简化分析。使用 Overview 窗格可以放大显示一部分记录。 放大后,火焰图会自动缩放以匹配同一部分
选择部分后,可以使用 W、A、S 和 D 键调整您的选择。 W 和 S 分别代表放大和缩小。 A 和 D 分别代表左移和右移
【火焰图】
在火焰图上看到一到三条垂直的虚线。蓝线代表 DOMContentLoaded 事件。 绿线代表首次绘制的时间。 红线代表 load 事件
在火焰图中选择事件时,Details 窗格会显示与事件相关的其他信息
【总结区域】
Summary汇总、Bottom-Up事件耗时长短排列、Call Tree树形图形式展示各项事件的子信息、Event Log事件发生先后顺序列出详细信息
- 蓝色(Loading):网络通信和HTML解析
- 黄色(Scripting):JavaScript执行
- 紫色(Rendering):样式计算和布局,即重排
- 绿色(Painting):重绘
- 灰色(other):其它事件花费的时间
- 白色(Idle):空闲时间
Loading事件
事件 | 描述 |
---|---|
Parse HTML | 浏览器执行HTML解析 |
Finish Loading | 网络请求完毕事件 |
Receive Data | 请求的响应数据到达事件,如果响应数据很大(拆包),可能会多次触发该事件 |
Receive Response | 响应头报文到达时触发 |
Send Request | 发送网络请求时触发 |
Scripting事件
事件 | 描述 |
---|---|
Animation Frame Fired | 一个定义好的动画帧发生并开始回调处理时触发 |
Cancel Animation Frame | 取消一个动画帧时触发 |
GC Event | 垃圾回收时触发 |
DOMContentLoaded | 当页面中的DOM内容加载并解析完毕时触发 |
Evaluate Script | A script was evaluated. |
Event | js事件 |
Function Call | 只有当浏览器进入到js引擎中时触发 |
Install Timer | 创建计时器(调用setTimeout()和setInterval())时触发 |
Request Animation Frame | A requestAnimationFrame() call scheduled a new frame |
Remove Timer | 当清除一个计时器时触发 |
Time | 调用console.time()触发 |
Time End | 调用console.timeEnd()触发 |
Timer Fired | 定时器激活回调后触发 |
XHR Ready State Change | 当一个异步请求为就绪状态后触发 |
XHR Load | 当一个异步请求完成加载后触发 |
Rendering事件
事件 | 描述 |
---|---|
Invalidate layout | 当DOM更改导致页面布局失效时触发 |
Layout | 页面布局计算执行时触发 |
Recalculate style | Chrome重新计算元素样式时触发 |
Scroll | 内嵌的视窗滚动时触发 |
Painting事件
事件 | 描述 |
---|---|
Composite Layers | Chrome的渲染引擎完成图片层合并时触发 |
Image Decode | 一个图片资源完成解码后触发 |
Image Resize | 一个图片被修改尺寸后触发 |
Paint | 合并后的层被绘制到对应显示区域后触发 |
四、参考文章
Chrome性能监测 1
Chrome性能监测 2
Chrome性能分析工具的使用相关推荐
- 怎样用谷歌浏览器测试软件性能,Chrome性能分析工具lightHouse用法指南
使用id名称和name直接获取元素 我们知道一些第三方的js库对如何快速选取html中的元素做了一些简化,貌似十分高深莫测,其实也不然.而且js本身自带了对于特殊元素的简便选取的方法,下面就为大家简单 ...
- 前端性能分析工具利器
作者:basinwang,腾讯 PCG 前端开发工程师 大型项目容易遇到性能问题,一般来说,当我们遇到性能瓶颈的时候,才会开始去进行相应的分析.分析的方向除了业务本身的特点相关之外,常见的还可以借助一 ...
- Android 常用的性能分析工具详解:GPU呈现模式, TraceView, Systrace, HirearchyViewer(转)...
此篇将重点介绍几种常用的Android性能分析工具: 一.Logcat 日志 选取Tag=ActivityManager,可以粗略地知道界面Displaying的时间消耗.当我们打开一个Activit ...
- linux 性能分析工具perf
perf 性能监控分析工具 perf 工具下载 https://cdn.kernel.org/pub/linux/kernel/tools/perf/v5.9.0/perf-5.9.0.tar.gz ...
- 性能分析工具 之 Perfetto基本使用
Perfetto是google从Android10开始引入的一个全新的平台级跟踪分析工具.适用于Android.Linux和Chrome的更加通用和复杂的用于性能检测和跟踪分析的生产级开源项目.在an ...
- 抖音 Android 性能优化:新一代全能型性能分析工具 Rhea!
本文选自「抖音 Android 性能优化」系列文章. 「抖音 Android 性能优化」系列文章是由抖音 Android 基础技术部门技术专家倾力打造的技术干货内容,和大家分享基础技术团队在打造极致用 ...
- 抖音 Android 性能优化系列:新一代全能型性能分析工具 Rhea
本文选自「抖音 Android 性能优化」系列文章. 「抖音 Android 性能优化」系列文章是由抖音 Android 基础技术部门技术专家倾力打造的技术干货内容,和大家分享基础技术团队在打造极致用 ...
- 前端性能分析工具-Lighthouse
1.前言 对于前端开发人员来说,除了实现页面功能外,那就是页面的性能响应问题也要关注.同样对于测试人员在进行性能测试时,也要关注前端页面的性能指标.测试前端性能市面上可以用到的工具也比较多,比如可以用 ...
- 运维工作常用的性能分析工具介绍
在运维工作中常用到的性能分析工具包括:vmstat.sar.iostat.netstat.free.ps.top.mpstat以及第三方开发工具,如:dstat.collectl及淘宝的开源监控项目t ...
最新文章
- 物理IP和浮动IP分别的含义是什么
- PHPStorm配置使用Git
- 20165214 2018-2019-2 《网络对抗技术》Exp6 信息搜集与漏洞扫描 Week9
- 中科大博士写外挂被抓,非法牟利300多万!
- 【BZOJ3218】a+b problem (最小割 + 主席树)
- Myeclipse 6.5 优化
- 推荐系统(1)-概述
- GOF之行为型模式Ⅱ(重点)
- c语言系统的通用数据结构,(转载)C语言实现通用数据结构的高效设计
- ta-lib依赖安装问题
- iptables NAT
- java实现数据的Excel导出(合并单元格、样式等)
- 6-Hadoop之旅-Hive(二)
- CUDA+cuDNN下载安装(配备GPU环境)
- guice android,android – 如何使用Guice的@Singleton?
- 推荐 - 将多种格式的 Office 文件转换为 PPT 和图片
- RGB和YUV视频存储格式
- ubuntu18.04 RoboCup实物
- 木瓜移动每日资讯0618:Facebook宣布将在全球范围内推出“Instagram Reels”广告服务
- 如何引用R语言以及R包:文献引用