3.优化建议
比较人性化的一点是,他不仅提出了问题,还提出了解决方案。
三,
1.使用
我们可以在“ ”菜单栏中找到并打开:
2.分析报告
四、——
1.关于我们关注和标注的3个地方
2.也是优化不可或缺的工具:
补充一下: TTFB:等待初始响应所花费的时间,也称为第一个字节的时间,是我们判断服务器和网络状态的重要指标。
这个时间捕获到服务器的往返延迟,以及等待服务器传递响应所花费的时间。
五人制,-
一、概述
2.布局主要由4部分组成
三、详解
需要注意的是,工具中的每种颜色实际上都有其自身的含义。
尖端:
使用隐身模式减少应用程序扩展的干扰。
4.火焰图
Main:显示主线程的运行状态。 X 轴代表时间,每个条代表一个事件。 条形图越长,事件持续的时间就越长。 Y 轴表示调用堆栈调用堆栈。
在堆栈中,上面的事件调用下面的事件。
注意红色警告:
6. - 显示第三方
很多时候并不是我们网站本身的问题。 您使用的第三方资源可能会拖累网站的性能。 因此,我们需要使用 Show Third Party 来排查问题。
一、试验地点:
2. 打开控制面板:+ Shift + P
3.打开,注意资源前面的彩色标识
标注三方资源,影响性能的移除或替换。
7. - 阻止 URL
对于不确定在项目中是否有用的资源,我们可以使用Block URL来排除。
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.总结
通过优化工具,我们可以轻松分析出网站的定位。 之后,您可以快速优化并使网站高性能运行。 优化仅此而已。
后续我们会详细了解一些优化相关的原理和细节。 如果您有优化相关的问题,欢迎一起讨论,共同进步。
版权声明:文章首发于 的博客: ,转载文章时请务必以超链接形式注明文章出处、作者信息及本版权声明。
结尾
如果你觉得这篇文章还不错网站优化有哪些方面,请点下面的卡片关注我网站优化有哪些方面,支持我三遍【分享点赞看】
*请认真填写需求信息,我们会在24小时内与您取得联系。