3.优化建议
更人性化的一点是，他不仅提出了问题网站优化，还提出了解决方案。
三，
1.使用
我们可以在“ ”菜单栏中找到并打开它：
2.分析报告
四、——
1.关于我们关注注解的3个地方
2.也是优化不可缺少的工具：
补充说明： TTFB：等待初始响应的时间，也称为到第一个字节的时间，是我们判断服务器和网络状况的重要指标。
此时间捕获服务器往返延迟和等待服务器传递响应所花费的时间。
五， -
一、概述
2.布局主要由4部分组成
三、详解
需要注意的是，工具中的每种颜色实际上都有自己的含义。
提示：
使用隐身模式来减少对应用程序扩展的干扰。
4. 火焰图
Main：显示主线程的运行状态。x 轴代表时间，每个条形代表一个事件。条形越长，事件所需的时间就越长。Y 轴代表调用堆栈。
在堆栈上，上面的事件调用下面的事件。
注意红色警告：
6. - 显示第三方
在很多情况下，并不是我们网站本身的问题，有可能是您使用的第三方资源拖累了网站的性能。因此，我们需要使用 Show Third Party 进行故障排除。
1.测试地点：
2.打开控制面板：+ Shift + P
3.打开，注意资源前面的彩色标志
所有三方资源都被标记为删除或替换影响性能的资源。
七、——屏蔽网址
对于项目中不确定是否有用的资源，我们可以使用 Block URLs 来排除它们。
1.选择资源-右键-阻止URL
阻止某些资源加载和控制变量以解决页面性能问题。
八， -
1.打开控制面板：+ Shift + P
2.输入：显示
3.找到对应的文件，可以看到文件左侧已经标注了一些代码的用法
解决方法也很简单：尽量解包，控制大小在40KB以下，去掉那些没用的代码。
九、——DOM
我们经常提到需要优化Dom，那么节点控制的合理范围是多少呢？
查看所有 DOM 节点数：
document.querySelectorAll('*').length
检查子元素的数量：
document.querySelectorAll('body > *').length
一般来说，寻找方法只在需要时创建 DOM 节点网站优化，并在不再需要时销毁它们。
十个——
我们不会多说重新渲染对页面的影响。那么如何知道页面的渲染过程呢？我们可以直观地查看它。
1. 打开选项
2.刷新页面
绿色区域越重，重复渲染的次数越多，对 DOM 进行优化以减少无效渲染。
十一、-层
您可能想知道，为什么要查看图层？
这是因为我们经常会在不知不觉中搞乱层关系，或者添加不合适的层。
1. 打开控制面板：+ Shift + P2。选择图层选项
图层问题是否清晰摆在你面前~
12. 总结
通过优化工具，我们可以很方便的对网站进行定位分析。之后，您可以快速进行优化，使网站高性能运行。优化，仅此而已。
以后我们会详细了解一些优化相关的原理和细节。如果您有优化相关的问题，请一起讨论，共同进步。
版权声明：文章首发于 's blog: ，转载时请务必以超链接的形式注明文章出处、作者信息及本版权声明。
结尾
如果你觉得这篇文章还不错，可以点击下方卡片关注我，给它一个【分享、点赞、观看】三连支持。
