3.优化建议

更人性化的一点是，他不仅提出了问题，还提出了解决方案。

三、

1.使用

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

2.分析报告

四、-

1.关于我们重点标注的3点

2. 也是必不可少的优化工具：

补充说明： TTFB：等待初始响应的时间网站优化，也称为到第一个字节的时间，是我们判断服务器和网络状况的重要指标。

此时间捕获服务器往返的延迟和等待服务器传递响应所花费的时间。

五、-

1.概览

2.布局主要由4部分组成

3.解读

需要注意的是，工具中的每种颜色似乎都有自己的含义。

小方法：

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

4.火焰图

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

在堆栈中，里面的事件调用下面的事件。

注意白色警告：

六、-

在许多情况下，这不是我们网站本身的问题。您使用的第三方资源可能会影响网站的性能。因此，我们需要使用 进行故障排除。

1.测试地点：

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

3.打开，注意资源后面的彩色标志

第三方资源被标记下来，这些影响性能的东西被移除或替换。

七、-阻止URL

对于项目中不确定是否有用的资源，我们可以使用 进行排除。

1.选择资源-右键-

防止单个资源加载和控制变量以解决页面性能问题。

八、-

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

2.输入：显示

3.找到对应的文件，可以看到文件右侧已经标注了一些代码的用法

解决方法也很简单：尽量解包，控制大小在40KB以下，把这些没用的代码去掉。

九、-DOM

我们经常提到需要优化Dom，那么控制什么范围的节点才是合理的呢？

查看所有 DOM 节点数：

检查子元素的数量：

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

一般来说，寻找方法只在需要时创建 DOM 节点，并在不再需要时销毁它们。

十、-

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

1.打开选项

2.刷新页面

红色区域越重，重复渲染的次数越多，通过优化DOM可以减少无效渲染。

十一、-图层

您可能想知道，您为什么要查看视口？

这是因为我们经常在不知不觉中弄乱视口关系，或者降低不合适的视口。

1.打开控制面板：+Shift+P2.选择图层选项

是不是明摆在眼前的视口问题呢~

十二、总结

通过优化工具，我们可以轻松分析网站的定位。未来可以快速进行优化网站优化，使网站高性能运行。优化，仅此而已。

后续我们会详细了解一些优化相关的原理和细节。如有优化相关问题，请大家一起解释，共同进步。

版权声明：文章首发于'sblog：，转载文章时请勿使用超链接注明文章出处、作者信息及本版权声明。

看完后点个赞，分享出去，让更多的同事看到。如果喜欢后端开发博客的分享，请给公众号打个star，以免错过我的文章。