web性能优化工具篇之 Performance 面板
·
Yin灏
打开方式
Performance 面板的打开方式同 NetWork 面板的打开方式
操作方式
小 TIPS:在开始录制之前,先切到 Elements tab
下,将 body
进行 delete element
的操作,这样操作的结果会更准确些~
我们将录制后的结果页分为三个区域,如下图所示:
- 概览
- 性能面板
- 性能摘要
概览
概览部分展示页面渲染时每个时间段执行的事件,当鼠标放上去的时候,还可以大图的形式去查看每个时间段页面的截图,Performance 就会将几个关键指标,如页面帧速 (FPS)、CPU 资源消耗、网络请求流量、V8 内存使用量 (堆内存) 等展现出来。
性能面板
通过概览区域的框选,可以看到性能面板和性能摘要区域会发生变化。我们着重看有我们自己的 js 执行的部分。
network
这部分可以看到加载的文件,按照顺序分别是 index.html
、style.css
、font.js
、jquery
、main.js
等。这部分内容和我们在 Network 面板看到的基本是类似的。
Timings
这部分可以记录一些关键的节点的时间信息。
FP(First Paint)
:页面中任一元素首次渲染的时间。FCP(First Contentful Paint
):当浏览器第一次渲染任何文字、图片(包含背景图片),以及非空白的 canvas 标记或 SVG 向量图片的时间。DCL(DOMContentLoaded Event)
:当纯 HTML 被完全加载以及解析时,DOMContentLoaded
事件会被触发,而不必等待样式表,图片或者子框架完成加载。LCP(Largest Contentful Paint)
:最大内容元素能够在可视窗口显示出来,需要的渲染时间,一般来讲,需要考虑以下元素:img
元素- 内嵌在 svg 中的 image 元素
- video 元素(使用到封面图片)
- 拥有背景图片的元素(通过 url()方式)
- 包含文本节点或或行内文本节点的块级元素
L(Onload Event)
:当页面载入完毕后执行 Javascript 代码。
Main
从 Main 中可以看到代码执行的过程,在 Evaluate Script(黄色) 点击可以看到该区域执行的是哪部分的 js 代码
Parse HTML
→ Evaluate Script
→ Compile Code
→ Recalculate Style
→ Layout
→ Paint
性能摘要
在概览图中选中的区域的事件执行时间会展示在 Summary 中。从下图中可以看出:
- Loading(加载时间):27ms
- Scripting(js 执行时间):82ms
- Rendering(渲染时间):8ms
- Painting(绘制时间):1ms
- System(系统时间):38ms
- Idle(空闲时间):29ms