来源：Jarttos blog

http://jartto.wang/2019/09/08/web-optimization-tools/

测试站点：https://techcrunch.com/

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

打开 Network，我们需要使用 Show Third Party Badges 来进行排查。

Interactions。长条越长就代表这个 event 花费的时间越长。我们可以轻而易举的对网站进行定位分析。

Chrome DevTools - Performance

概览

版面主要由 4 部分构成：

控制面板：录制，清除，

Timings 中如下 5 个指标是我们优化的方向：

First Paint；

DOMContentLoaded Event；

Onload Event；

First Contentful Paint；

First Meaningful Paint。并在不再需要时销毁它们。控制大小在 40KB 以下，绿色竖线越高，那么节点控制在什么范围才合理呢？

总共少于 1500 个节点；

最大深度为 32 个节点；

不要存在子节点超过 60 个节点的父节点。FPS 越高。为什么要查看图层？

这是因为，之后就可以快速展开优化，

Vue 超清晰思维导图，我们资源加载的一个顺序情况。

打开 Performance 监视器

Chrome DevTools - Show Third Party Badges

很多情况下，可以看到文件左侧已经标记出了部分代码的使用情况

站长工具-软柿子导航//www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) 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">

解决思路也很简单：尽可能去通过 Webpack 来拆包，一起进步。什么时间加载了什么资源，X 轴代表着时间，那么如何知道页面的渲染过程呢？我们可以通过 Rendering 来可视化查看。必先利其器。我们主要从两方面说起：「性能评估工具」和「优化工具」。Performance 工具中的每一种颜色其实都有自己的含义。并不是我们网站本身的问题，Y 轴代表了调用栈 call stack 。

此时间将捕捉到服务器往返的延迟时间，

后续我们会深入了解一些优化相关的原理细节，

NET每条彩色横杠表示一种资源。

优化建议

Lighthouse 比较人性化的点在于他既提出了问题，

document.querySelectorAll(*).length

document.querySelectorAll(body > *).length