前端开发工具DevTools的详细知识点总结（五）

performance面板

这一章，我们一块来看看performance面板的常用功能，打开devtools并跳转到performance面板。

performance面板的最主要功能就是查看并优化页面的各方面性能，其中就包括最常见的页面渲染性能。（注：这块版本由于我自己目前用的并不多，所以目前这块知识的讲述会显得很浅显。）

记录表现

首先先来讲述此页面的常用按钮的功能使用。

最左边的第一个按钮和第二个按钮的功能在下方空白区域有说明，其功能分别是开始一个新的表现记录即记录运行时性能以及记录一个页面加载即记录加载性能。
注意：只有这两个按钮才能开启性能分析页面。
第三个按钮就是清除当前的性能分析页面的记录。

剩下的一些按钮以及其下面的这块可隐藏的功能区域几乎都是为了性能分析页面所服务，大家有兴趣可以自己试试。

性能分析

上图就是一个新的记录三秒的运行时性能表现，这个面板主要有上下两个部分且都是为了体现其性能表现，上半部分显得有些杂乱且有很多细节的性能分支，比如Frames、Main、Raster等等，随着所要查看的页面的不同还会有更多的细节分支，每个分支都有其各自的体现性能的方式。
相比之下，下半部分的性能显示就更为直观，以图中为例，3s的时间其中有1.5的时间用于页面渲染，显然此页面的渲染的代码性能并不高，有待优化。
除了Summary的面板查看性能外还有Bottom-up，Call Tree以及Event Log等三个面板，这里也不再详细讲述，有兴趣大家可以自己试试。
注意：随着鼠标下上半面板所选择的区域的不一样，下半面板的显示内容也会随之改变，默认情况的是选择全局Main板块。

渲染功能区

刚刚我们查看到页面的渲染部分耗时最大，接下来我们可以进一步查看具体的有关页面渲染的更多细节功能。还记得Ctrl+Shift+P的快捷键吗？没错，它就是打开devtools里很多隐藏功能区的快捷键，其中就包括一个大系列的抽屉功能，输入Show Render即可看到更多详细的渲染功能。

这里有很多有关查看页面渲染的功能选项并且也都有相应的英文解释，所以这里我就不做过多介绍。

渲染性能

知道了浏览器可以支持渲染功能，那么其最基本的底层原理又是什么呢？

60fps 与设备刷新率

目前大多数设备的屏幕刷新率为 60 次/秒。因此，如果在页面中有一个动画或渐变效果，或者用户正在滚动页面，那么浏览器渲染动画或页面的每一帧的速率也需要跟设备屏幕的刷新率保持一致。
其中每个帧的预算时间仅比 16 毫秒多一点 (1 秒/ 60 = 16.66 毫秒)。但实际上，浏览器有整理工作要做，因此所有工作需要在 10 毫秒内完成。如果无法符合此预算，帧率将下降，并且内容会在屏幕上抖动。此现象通常称为卡顿，会对用户体验产生负面影响。

像素管道

像素管道即可以控制渲染的管道，其有五个区域：

• JavaScript。一般来说，我们会使用 JavaScript 来实现一些视觉变化的效果。
• Style。此过程是根据匹配选择器计算出哪些元素应用哪些 CSS 规则的过程。从中知道规则之后，将应用规则并计算每个元素的最终样式。
• Layout。在知道对一个元素应用哪些规则之后，浏览器即可开始计算它要占据的空间大小及其在屏幕的位置。
• Paint。绘制是填充像素的过程。它涉及绘出文本、颜色、图像、边框和阴影，基本上包括元素的每个可视部分。绘制一般是在多个层上完成的。
• Composite。由于页面的各部分可能被绘制到多层，由此它们需要按正确顺序绘制到屏幕上，以便正确渲染页面。对于与另一元素重叠的元素来说，这点特别重要，因为一个错误可能使一个元素错误地出现在另一个元素的上层。

管道的每个部分都有可能产生卡顿。

定制devtools

这部分主要讲述通过devtools的内部功能设置来设定适合自己风格的devtools。

Settings和Drawer

这两大功能区域我在之前的文章里都提到过。
首先，settings里包含许多devtools的定制功能也是devtools里功能最丰富的区域，大家可以自行去哪里逛逛，两种常用的打开devtools的settings的方式：
（快捷键）F1/（Shift+?）或者单击settings按钮。

drawer是隐藏功能区域里的一类功能区，所以这里面是一些隐藏的定制devtools的功能。
两种打开方式：Esc或者（Ctrl+Shift+P）+drawer。


不难发现，目前总共有14种drawer：

如果有兴趣的话可以把隐藏区域的所有功能都试试，那里面除了drawer功能区域外还有Panel、Appearance、Console、Debugger、Elements、Global、Help、Mobile、Navigation、Network、Performance、Persistence、Rendering、Resources、Screenshot、Sensors、Settings、Sources这些功能区域。乍一看，功能区域非常多，但是其实有很多功能我们都以及打过照面。

面板重排序

这是原始的面板排序：

在不改变devtools宽度的情况下，此行只能显示五种面板，为了满足我们自己的风格需求我们可以更改面板的前后顺序（通过鼠标拖拽）以及显示的面板（通过最右边的选择按钮）。

并且我们还能够改变devtools的宽度来显示更多/更少的面板种类：

devtools的显示位置

devtools总共有四种显示位置可选：浏览器左边，浏览器右边，浏览器下边以及开辟一个新的窗口。
首先，点击devtools第一行的扩展按钮：

然后Dock side可以选择自己想要的devtools的显示位置。

devtools的主题背景

先看看如下两种devtools的背景效果图：


一种light主题，一种dark主题，有没有觉得dark主题似乎更酷。
打开方式：
首先打开Settings，在Preferences下的Appearance有Theme下拉按钮选项，有两套默认可选的主题背景，至于System preference是怎么玩的我暂时也不知道。

结语

送君千里终须一别，到此，经过五期的内容总结，devtools里的一些基本常用的功能都已经介绍完毕，但是我所介绍的这么多也只是devtools强大功能的冰山一角。剩余的内容要么就是比较简单也不常用，大家可以自己一眼就能看明白，要么就是我自己暂时也不会，所以这里只是一个暂时的终点。随着自己的继续学习，后面还会介绍有关devtools的更好玩更实用的功能文章。
最后，我在这里再给出devtools的官方教程，有条件的伙伴可以参看此教程进行学习：
https://developers.google.com/web/tools/chrome-devtools?hl=zh-cn