一、PageSpeed

1.使用PageSpeed

我们可以在“ Chrome DevTools”菜单栏中找到并打开它：

2.分析报告

二、Chrome DevTools-Network

1.关于网络，我们重点关注3个标记点

2.定时也是进行优化的必不可少的工具：

其他说明：TTFB：等待初始响应所花费的时间，也称为第一字节时间，是我们判断服务器和网络状况的重要指标。

这次将捕获服务器的往返延迟以及等待服务器传递响应所花费的时间。

三、Chrome DevTools-性能

1.概述

2.版式主要由4个部分组成

3.概述详细说明

需要特别注意。实际上，“效果”工具中的每种颜色都有其自己的含义。

提示：

使用隐身模式以减少Chrome扩展程序对应用程序的干扰。

4.火焰图

Main：显示主线程的运行状态。 X轴代表时间，每个条形代表一个事件。栏越长，事件花费的时间越长。 Y轴表示调用堆栈。

四、Chrome开发者工具-显示第三方徽章

在许多情况下，这不是我们网站本身的问题。您使用的第三方资源可能会拖累网站的性能。因此，我们需要使用“显示第三方徽章”来进行故障排除。

1.测试站点：

2.打开控制面板：Command + Shift + P

3.打开网络并注意资源前面的彩色标志

五、Chrome DevTools阻止请求网址

对于不确定在项目中是否有用的资源，我们可以使用“阻止请求URL”将其排除。

1.选择资源右键单击-阻止请求URL

防止加载某些资源，并控制变量以解决页面性能问题。

六、Chrome DevTools-Coverage

1.打开控制面板：Command + Shift + P

2.输入：显示覆盖范围

3.找??到相应的文件，您可以看到文件左侧已经标记了一些代码的用法

解决方案也非常简单：使用Webpack尽可能解压缩，将大小控制在40KB以下，并删除那些未使用的代码。

七、Chrome DevTools-DOM

查看所有DOM节点的数量：

查看子元素的数量：

document.querySelectorAll('body > *').length

通常，寻找仅在需要时创建DOM节点并在不再需要时销毁它们的方法。

八、Chrome DevTools-渲染

关于页面的重新渲染的影响，我们不会说太多。那么您如何知道页面的渲染过程呢？我们可以通过渲染直观地查看它。

1.打开“渲染”选项

2.刷新页面

绿色区域越重，渲染越重复网站优化，并且对DOM进行了优化以减少无效渲染。

九、Chrome DevTools-Layer

您可能很好奇，为什么要查看图层？

这是因为我们经常在不知不觉中搞乱了图层关系或添加了不适当的图层。

1.打开控制面板：Command + Shift + P 2.选择“图层”选项

十、摘要

通过优化工具，我们可以轻松分析网站的位置。之后，您可以快速开始优化以使网站以高性能运行。优化无非就是如此。