web性能优化工具篇之 Performance 面板

这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战

本篇介绍 chrome 的 Performance 面板。

打开方式

Performance 面板的打开方式同 NetWork 面板的打开方式

操作方式

小TIPS：在开始录制之前，先切到 Elements tab 下，将 body 进行 delete element 的操作，这样操作的结果会更准确些~

我们将录制后的结果页分为三个区域，如下图所示：

1. 概览
2. 性能面板
3. 性能摘要

概览

概览部分展示页面渲染时每个时间段执行的事件，当鼠标放上去的时候，还可以大图的形式去查看每个时间段页面的截图，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

最后说一句

如果这篇文章对您有所帮助，或者有所启发的话，帮忙关注一下，您的支持是我坚持写作最大的动力，多谢支持。