不间断蔬果（网站强化名列子公司）网站强化，网站强化专业培训，
作者：Jarttos blog
http://jartto.wang/2019/09/08/web-optimization-tools/
工欲善其事，工欲善其事。在「网站强化两栖作战：http://jartto.wang/2019/02/16/web-optimization/」中他们提到了一些强化的相关经验，并没有对强化辅助工具进行讨论，这节瞧瞧他们一起上手实践吧！概 要
有关强化辅助工具，他们主要就从两方面讲起：「操控性评估结果辅助工具」和「强化辅助工具」。
操控性评估结果辅助工具：
Lighthouse；
PageSpeed；
YSlow。
强化辅助工具：
他们主要就倚赖「Chrome DevTools」，大致如下：
Network；
Performance；
Show Third Party Badges；
Block Request URL；
Coverage；
DOM；
Rendering；
Layer。
Lighthouse
Lighthouse 安装
Chrome Setting - 更多辅助工具 - 扩充程序 - 关上 Chrome 网上应用店 - Lighthouse
应用程序 - 生成调查报告
调查报告是他们的一个关键参照分项，这是网站评估结果的通用方法。
当然，网站也会有不同的类型，高度关注分项也各不相同，先期他们会继续深入探讨「如何制定合理的网站强化操控性分项」。
强化提议
Lighthouse 比较实用的点在于他既明确提出了问题，同时也明确提出了解决提议。
PageSpeed
使用 PageSpeed
他们可以在「Chrome DevTools」EditGrid中找到并关上：
分析调查报告
Chrome DevTools - Network
有关 Network 他们重点高度关注标示的 3 处
Timing 也是强化不可缺少的辅助工具：
补充说明一下：TTFB：等候如上所述积极响应所制的天数，也称为第一二进制的天数，这是他们判断伺服器和网络状况的关键分项。
此天数将捕捉伺服器来往的延迟天数，和等候伺服器数据传输积极响应所制的天数。
Chrome DevTools - Performance
概述
平面媒体主要就由 4 部份构成：
控制台：演唱，去除，配置历史记录期间须要捕捉的信息；
Overview：网页操控性的高级汇整，和网页读取情形；
闪电图：CPU 拼接跟踪的建模；
纵览：饼图历史记录各部份费时情形。
Overview 简述
FPS每秒钟帧数。绿色生态斜线越高，FPS 越高。FPS 图象上的红色块则表示长天数帧，很可能会出现雅雷；
CPU天然资源。此面积图命令耗用 CPU 天然资源的事件类型。
NET每一全彩条带则表示一类天然资源。条带越长，索引天然资源所需的天数越长。每个条带的浅色部份则表示等候天数（从允诺天然资源到第二个二进制浏览完成的天数）。浅色部份则表示数据传输天数（浏览第二个和最后一个二进制之间的天数）。
须要当心，Performance 辅助工具中的每一类颜色其实都有自己的涵义。
HTML 文件为蓝色；
脚本为黄色；
样式表为紫色；
媒体文件为绿色生态；
其他天然资源为灰色。
小技巧：
使用无痕模式，减少 Chrome 扩充程序会给应用的干扰。
闪电图
NetworkNetwork 这里他们可以看出来，他们天然资源读取的一个顺序情形。什么天数读取了什么天然资源，通过这些，他们更直观的知道天然资源是否并行读取。
Frames上文提及到的网页帧情形。
Interactions。
Timings 中如下 5 个分项是他们强化的方向：
First Paint；
DOMContentLoaded Event；
Onload Event；
First Contentful Paint；
First Meaningful Paint。
Main：展示了主线程运行状况。X 轴代表着天数，每个长条代表着一个 event。长条越长就代表这个 event 花费的天数越长。Y 轴代表了调用栈 call stack 。
在栈里，上面的 event 调用了下面的 event。
注意红色警告：
JS Heap：
JavaScript 运行过程中的大部份数据都保存在堆 Heap 中，所以 JavaScript 操控性分析另一个比较关键的方面是内存，也就是堆的分析。
关上 Performance 监视器
Chrome DevTools - Show Third Party Badges
很多情形下，并不是他们网站本身的问题，有可能你使用的三方天然资源拖累了站点操控性。所以，他们须要使用 Show Third Party Badges 来进行排查。
测试站点：https://techcrunch.com/
关上控制台：Command + Shift + P
关上 Network，注意天然资源前面的全彩标志
三方天然资源都被标记出来了，移除或者替换那些影响操控性的东西。
Chrome DevTools - Block Request URL
对于项目中不确定是否有用的天然资源，他们可以使用 Block Request URL 来排除。
选中天然资源 - 右键 - Block Request URL
阻止某些天然资源读取，控制变量法来排查网页操控性问题。Chrome DevTools - Coverage
关上控制台：Command + Shift + P
输入：Show Coverage
找到相应的文件，可以看到文件左侧已经标记出了部份代码的使用情形
解决思路也很简单：尽可能去通过 Webpack 来拆包，控制大小在 40KB 以下，移除那些未使用代码。
Chrome DevTools - DOM
他们经常提到要强化 Dom，那么节点控制在什么范围才合理呢？
总共少于 1500 个节点；
最大深度为 32 个节点；
不要存在子节点超过 60 个节点的父节点。
查看所有 DOM 节点数：
document.querySelectorAll(*).length查看子元素个数：
document.querySelectorAll(body > *).length通常，只在须要时查找创建 DOM 节点的方法，并在不再须要时销毁它们。
Chrome DevTools - Rendering
有关重渲对网页的影响，他们就不多说了。那么如何知道网页的渲染过程呢？他们可以通过 Rendering 来建模查看。
关上 Rendering 选项
刷新网页
绿色生态区域越重，说明重复渲染的次数越多，通过强化 DOM 来减少无效渲染。
Chrome DevTools - Layer
你可能会很好奇，为什么要查看图层？
这是因为，他们经常会在不知不觉的情形下搞乱了图层关系，或者增加了不合适的图层。关上控制台：Command + Shift + P2.选择 Layer 选项
是不是图层问题就清清楚楚的摆在眼前了～
总 结
通过强化辅助工具，他们可以轻而易举的对网站进行定位分析。之后就可以快速展开强化，让网站高操控性的运转起来。强化，也不过如此。
先期他们会深入了解一些强化相关的原理细节，如果你有强化相关的问题，欢迎一起深入探讨，一起进步。
粉丝专属福利：公众号高度关注后回复“前端架构设计”，将限时领取书籍一份，每天只限10份，已累计领取超过33000份。
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
