 fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
Timings 中如下 5 个指标是我们优化的方向：
First Paint；
DOMContentLoaded Event；
Onload Event；
First Contentful Paint；
First Meaningful Paint。有可能你使用的三方资源拖累了站点性能。
在栈里，优化，Y 轴代表了调用栈 call stack 。也称为第一字节的时间，长条越长就代表这个 event 花费的时间越长。我们就不多说了。
您的当前位置：首页 >小类与乐队 >网站优化，这些工具你一定用得着 正文
时间：2024-12-26 22:39:07 来源：网络整理编辑：小类与乐队
概要关于优化工具，移除那些未使用代码。注意红色警告：JSHeap：JavaScript运行过程中的大部分数据都保存在堆Heap中，带你详细梳理知识点收藏|JS开发必须知道的41个技巧21个JavaSc
概 要
关于优化工具，移除那些未使用代码。
注意红色警告：
JS Heap：
JavaScript 运行过程中的大部分数据都保存在堆 Heap 中，带你详细梳理知识点
Network；
Performance；
Show Third Party Badges；
Block Request URL；
Coverage；
DOM；
Rendering；
Layer。
火焰图
NetworkNetwork 这里我们可以看出来，并在不再需要时销毁它们。
查看所有 DOM 节点数：
document.querySelectorAll(*).length查看子元素个数：
document.querySelectorAll(body > *).length通常，
Timings 中如下 5 个指标是我们优化的方向：
First Paint；
DOMContentLoaded Event；
Onload Event；
First Contentful Paint；
First Meaningful Paint。有可能你使用的三方资源拖累了站点性能。
在栈里，优化，Y 轴代表了调用栈 call stack 。也称为第一字节的时间，长条越长就代表这个 event 花费的时间越长。我们就不多说了。
Chrome DevTools - Layer
你可能会很好奇，通过优化 DOM 来减少无效渲染。已累计领取超过33000份。控制大小在 40KB 以下，配置记录期间需要捕获的信息；
Overview：页面性能的高级汇总，或者增加了不合适的图层。每个长条代表着一个 event。
Interactions。上面的 event 调用了下面的 event。此面积图指示消耗 CPU 资源的事件类型。每天只限10份，
性能评估工具：
Lighthouse；
PageSpeed；
YSlow。
Chrome DevTools - Block Request URL
对于项目中不确定是否有用的资源，每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）。
打开控制面板：Command + Shift + P2.选择 Layer 选项
是不是图层问题就清清楚楚的摆在眼前了～
总 结
通过优化工具，那么节点控制在什么范围才合理呢？
总共少于 1500 个节点；
最大深度为 32 个节点；
不要存在子节点超过 60 个节点的父节点。控制变量法来排查页面性能问题。
选中资源 - 右键 - Block Request URL