网站优化，这些工具你一定用得着（网站优化的几种方法）

网站优化，这些工具你一定用得着（网站优化的几种方法）

一、提要

关于优化工具，我们首要从两方面说起：「性能评价工具」和「优化工具」。

1.性能评价工具

LighthousePageSpeedYSlow

2.优化工具我们首要依靠「Chrome DevTools」，大致以下：

NetworkPerformanceShow Third Party BadgesBlock Request URLCoverageDOMRenderingLayer

二、Lighthouse

1.Lighthouse 安装

Chrome Setting - 更多工具 - 扩大法式 - 翻开 Chrome 网上利用店 - Lighthouse

2.插件 - 天生报告

报告是我们的一个重要参考目标，这是网站评价的通用方式。

固然，网站也会有分歧的种别，关注目标也不尽不异，后续我们会继续探讨「若何制定公道的网站优化性能目标」。

3.优化倡议

Lighthouse 比力人性化的点在于他既提出了题目，同时也提出领会决倡议。

三、PageSpeed

1.利用 PageSpeed

我们可以在「Chrome DevTools」菜单栏中找到并翻开：

2.分析报告

四、Chrome DevTools - Network

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

2.Timing 也是优化不成缺少的工具：

补充说明一下：TTFB：期待初始响应所用的时候，也称为第一字节的时候，这是我们判定办事器以及收集状态的重要目标。

此时候将捕捉到办事器往返的提早时候，以及期待办事器传送响应所用的时候。

五、Chrome DevTools - Performance

1.概览

2.版面首要由 4 部分组成

控制面板：录制，断根，设置记录时代需要捕捉的信息Overview：页面性能的高级汇总，以及页面加载情况火焰图：CPU 堆叠追踪的可视化总览：饼图记录各部分耗时情况

3.Overview 详解

FPS 每秒帧数。绿色竖线越高，FPS 越高。FPS 图表上的红色块暗示长时候帧，极能够会出现卡顿。CPUCPU 资本。此面积图指示消耗 CPU 资本的事务范例。NET 每条彩色横杠暗示一种资本。横杠越长，检索资本所需的时候越长。每个横杠的浅色部分暗示期待时候（从请求资本到第一个字节下载完成的时候）。深色部分暗示传输时候（下载第一个和最初一个字节之间的时候）。

需要出格留意，Performance 工具中的每一种色彩实在都有自己的寄义。

HTML 文件为蓝色。剧本为黄色。款式表为紫色。媒体文件为绿色。其他资本为灰色。

小技能：

利用无痕形式，削减 Chrome 扩大法式会给利用的干扰。

4.火焰图

NetworkNetwork 这里我们可以看出来，我们资本加载的一个顺序情况。什么时候加载了什么资本，经过这些，我们更直观的晓得资本能否并行加载。Frames上文说起到的页面帧情况。InteractionsTimings 中以下 5 个目标是我们优化的偏向First PaintDOMContentLoaded EventOnload EventFirst Contentful PaintFirst Meaningful PaintMain：展现了主线程运转状态。X 轴代表着时候，每个长条代表着一个 event。长条越长就代表这个 event 花费的时候越长。Y 轴代表了挪用栈 call stack 。

在栈里，上面的 event 挪用了下面的 event。

留意红色警告：

JS HeapJavaScript 运转进程中的大部分数据都保存在堆 Heap 中，所以 JavaScript 性能分析另一个比力重要的方面是内存，也就是堆的分析。

翻开 Performance 监视器

六、Chrome DevTools - Show Third Party Badges

很多情况下，并不是我们网站自己的题目，有能够你利用的三方资本拖累了站点性能。所以，我们需要利用 Show Third Party Badges 来停止排查。

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

2.翻开控制面板：Command + Shift + P

3.翻开 Network，留意资本前面的彩色标志

三方资本都被标志出来了，移除大概替换那些影响性能的工具。

七、Chrome DevTools - Block Request URL

对于项目中不肯定能否有用的资本，我们可以利用 Block Request URL 来解除。

1.选中资本 - 右键 - Block Request URL

阻止某些资本加载，控制变量法来排查页面性能题目。

八、Chrome DevTools - Coverage

1.翻开控制面板：Command + Shift + P

2.输入：Show Coverage

3.找到响应的文件，可以看到文件左侧已经标记出了部分代码的利用情况

处理思绪也很简单：尽能够去经过 Webpack 来拆包，控制巨细在 40KB 以下，移除那些未利用代码。

九、Chrome DevTools - DOM

我们经常提到要优化 Dom，那末节点控制在什么范围才公道呢？

总共少于 1500 个节点最大深度为 32 个节点不要存在子节点跨越 60 个节点的父节点

检察一切 DOM 节点数：

document.querySelectorAll('*').length

检察子元素个数：

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

凡是，只在需要时查找建立 DOM 节点的方式，并在不再需要时烧毁它们。

10、Chrome DevTools - Rendering

关于重渲对页面的影响，我们就不多说了。那末若何晓得页面的衬着进程呢？我们可以经过 Rendering 来可视化检察。

1.翻开 Rendering 选项

2.革新页面

绿色地区越重，说明反复衬着的次数越多，经过优化 DOM 来削减无效衬着。

十一、Chrome DevTools - Layer

你能够会很猎奇，为什么要检察图层？

这是由于，我们经常会在不知不觉的情况下搞乱了图层关系，大概增加了分歧适的图层。

1.翻开控制面板：Command + Shift + P2.挑选 Layer 选项

能否是图层题目就清清楚楚的摆在眼前了～

十二、总结

经过优化工具，我们可以垂手可得的对网站停止定位分析。以后便可以快速展开优化，让网站高性能的运转起来。优化，也不外如此。

后续我们会深入领会一些优化相关的道理细节，假如你有优化相关的题目，接待一路探讨，一路进步。