这是我参与11月更文挑战的第5天,活动详情查看:2021最后一次更文挑战。
前言
Chrome DevTools
是 Chrome
浏览器提供的开发者工具,可以帮助开发者对页面进行性能分析,网络请求分析等,帮助我们寻找到性能瓶颈,从而制定优化策略。
接下来我们将对 Chrome DevTools
的 Performance
、Network
面板展开介绍。
Performance
在使用 Performance
进行页面分析之前,我们一般先让浏览器处于无痕模式下,无痕模式可以保证 Chrome
在一个相对干净的环境下运行,屏蔽浏览器插件等因素对页面性能分析造成干扰。通过 Chrome
右上角打开无痕模式:
通过快捷键 Command+Opiton+I
(window
系统 Control+shift+I
) 打开 Chrome DevTools
,选择 Performance
面板,根据面板的提示信息,开始生成页面性能分析报告。
生成的分析报告中,包含许多跟页面性能相关的指标,从区域上可分为概览区域,资源消耗详情区域和统计汇总区域。
概览区域
概览区域横坐标为时间,自上而下分别为 FPS
、CPU
、NET
和屏幕快照:
FPS
:帧率,每秒渲染帧等次数,红色表示帧率过低,绿色则正常。该指标一般在页面分析动画性能时使用,FPS
稳定在60左右最佳,FPS
过低,页面则会有明显等卡顿。CPU
:表示CPU
耗时,区域内的颜色表示各种事件。NET
:蓝色区域表示这个时间段存在网络请求。- 屏幕快照:表示该时间点上的屏幕截图。
资源消耗详情区域
资源消耗详情区域包含各项重要资源的统计详情,横轴为时间轴。
Frames
表示绘制每一帧消耗的时间,鼠标移动到该区域,可以查看每一帧的耗时和 FPS
。
Timing
我们知道在页面呈现过程中,大致经历以下几个步骤:
HTML
解析生成DOM
树。- 结合计算样式规则,生成或更新
render
树。 - 图层化:根据一定的规则将
DOM
子树划分到的图层,生成或更新layer
树。 - Paint:绘制图层,输出绘图指令列表。
- Rasterization:光栅化,为图层区域填充像素值。
- 合成:将图层按规则合成。
Timings
中记录一些关键的时间点,这些时间点可以辅助分析页面性能:
- DCL:
DOMContentLoaded Event
触发的时间点,表示页面DOM
树解析完成。 - L:
onload
事件触发时间点,表示页面加载完成,包括图片等资源。 - FP:
First Paint
,页面首次绘制的时间点,即页面首次产生像素变化,例如设置页面背景颜色,当背景颜色绘制完成即触发。 - FCP:
First Contentful Paint
,页面首次有效内容的绘制,包括文本、图片、canvas
和svg
。FCP
和FP
有时可能相等。 - LCP:
Largest Contentful Paint
,最大有效内容的绘制时间点,表示页面中占可视区域面积最大的内容绘制完成,在单页面盛行的时代,FP
和FCP
逐渐失去它的衡量意义,LCP
成为一个更准确衡量页面呈现快慢的重要指标。
Main
记录主线程处理 task
消耗的时间,区域的内容自上而下表示task的调用栈,不同的颜色表示执行不同类型的事件,主要需要关注三种颜色:
颜色 | 事件 |
---|---|
黄色 | js 脚本执行 |
紫色 | Render 相关的事件 (包括样式计算,更新 layer 树,更新 render 树) |
绿色 | Paint 相关的事件 |
task
如果存在红色的三角形,表示该任务存着异常的情况,点击该事件可以在 summary 区域查看详细内容:
Raster
记录 Rasterizer
(光栅化)线程的运行时间,该线程主要处理 Rasterizer Paint
相关的任务。
GPU
表示 GPU
运行的时间,GPU
具有高并行计算能力,能够“加速”页面处理,例如合成图层一般就由 GPU
处理。
Compositer
记录 Compositer (合成线程)的运行时间,该线程主要负责:
- 页面渲染时将内容上传给GPU,通知GPU绘制到屏幕。
- 页面滚动时处理可视区域和即将可视区域。
- 处理
CSS
动画。
当页面不存在 CSS
动画时,该线程被利用的时间很少。
统计汇总区域
- Summary:以扇形图的形式统计各个事件占用的时间。
- Bottom-Up、Call Tree和Event Log:这三个面板可以查看每个事件的时间信息,调用顺序和日志等内容。
Network
网络资源请求是构成一个网站的重要组成成分,Network
作为 DevTools
另一个重要的面板,可以帮助我们从网络资源请求的角度,分析页面的性能。
从面板中我们可以详细的每个请求的信息:
-
请求的名称(Name),点击Name 还可以查看具体的请求信息和响应信息。
-
请求的状态(status):如果请求的状态异常(4XX 或 5XX),则表示资源加载异常,可能影响页面渲染。
-
资源的类型(Type)。
-
发送请求的对象(initiator)。
-
资源的大小(Size):如果是直接从缓存里获取的资源,还可以看出是从哪种类型的缓存获取的资源(memory cache 和 disk cache)。
-
耗时(time):从连接开始,到最终内容下载完成经过的时间。
-
瀑布图(waterfall):鼠标移动上去可以看到这个请求的时间线。