五个工具面板

本篇会介绍5个工具：

Network 面板：查看页面时间线
Performance 面板：查看JS性能
Rendering 面板：查看页面渲染
Coverage 面板：查看代码使用率
Lighthouse 面板：查看优化建议

Network 面板

查看页面时间线

第一栏

Preserve log（不常用）：当页面刷新的时候，是否保留上一个页面的log。

Disable cache：是否不启用缓存，一般会勾选，不启用缓存。

No throttling：模拟慢速网络。

点击右上角的设置，打开show overview就可以看到下面的时间线面板。一般可不看这个，看下面的Waterfall即可。

Network面板

右键单击tab栏，就会出现如图面板，勾选相应的选项，即可出现在tab栏中。

Waterfall

我们需要关注的是Request/Response这一块：

Request send：把请求内容全部发出去的时间，比如上传100M的文件，那么时间就会很长，如果只是一个get请求，那么时间会比较短；

Waiting for server response：等服务器返回内容的时间，这时浏览器什么都不会做（如果这个时间过长，那么你可以甩锅给服务器，或者是用户的带宽）；

Content Download：下载相应的时间，如果下载一个1G的文件，时间会很长，如果下载一个json文件，那么时间会很短；

下面的Explanation是对每个字段的解释；

最下面的状态行

requests：发送请求数；

transferred：网络传输量；

resources：页面加载的资源量，它比transferred是会大的，因为有些插件不是从网络上下载的；

Finish：总共用的时间；

DOMContentLoaded：DOM ready的时间；

Load：首页资源加载的时间；

一般Finish时间最长，DOMContentLoaded的时间最短。

Performance 面板

查看JS性能

步骤

1、小技巧：先把<body>删除；

2、点击Performance 面板中的录制，紧接着点击页面左上角的刷新按钮，待刷新完成后，停止录制；

3、最后，会得到如下图所示内容，在第一栏那里选中，即可查看对应的内容；

分析

灰色内容是系统的，也就是浏览器的；黄色或紫色内容是JS相关的；且分段的黄色是js文件按顺序执行，想要知道是哪个js，点击它，看下面Summary里的内容，点击名字还可以看对应的文件代码；

下图就是一个调用栈，如果有一块层级很低（比较靠下），而且执行时间很长，那么你就应该去优化一下它了；

Rendering 面板

查看页面渲染查看页面渲染

如何打开它

打开控制台，按ESC，若tab栏上没有，就点击左上角的三个点，点击Rendering，如下图

使用

Paint flashing

使用最多的是第一个属性Paint flashing，叫绘制闪烁，它会告诉你，你的页面哪些地方进行了重新绘制，比如一些动画元素，如下图，绿框里的内容一直在变化；

如果有些地方绘制得过于频繁，那么就需要进行优化了，可参考csstriggers，尽量使用不需要layout重构的属性，比如使用transform代替left、right这种；

Frame Rendering Stats

Frame Rendering Stats：帧率渲染统计，它出现在左上角，如果帧率低于30fps，那就有点卡了；

Coverage 面板

查看代码使用率

它的打开方式同Rendering 面板一样，只是点击三个点里的Coverage即可；

Lighthouse面板

查看优化建议

Device

想要查看哪个端的建议；

把你想查看的勾选上，点击Analyze page load，生成报告

报告具体参数

Performance

First Contentful Paint：第一个内容的绘制时间；

Largest Contentful Paint：最大内容绘制时间；；

Time to Interactive：可交互时间；

Total Blocking Time：阻塞时间，一般是要做到0ms；

只告诉了评分，并没有告诉怎么去优化

【Web性能优化】工具篇