压缩和Gzip的区别

这些都是您对网站上的资源（例如 .css 文件和 .js 文件）执行的操作。 它们都能够减小文件大小，从而提高服务器和浏览器之间网络传输的效率。 简而言之，有利于性能提升。 网络是 Web 的速度瓶颈，减小文件大小有助于提升速度。

但这两种操作截然不同。 如果你之前不知道这一点，那么理解它们之间的区别很有必要。

压缩会执行以下操作：删除空格、删除注释、删除不必要的分号、缩短十六进制代码长度……

……等等。 文件仍然是完全有效的代码。 您可能不希望尝试阅读或使用它，但它并没有违反任何规则。 浏览器可以像读取原始文件一样读取和使用它。

压缩会创建一个您最终使用的新的文件。 例如，您可以创建一个 `style.css` 文件来进行工作。 然后您可以将其压缩成 `style.min.css`。

Gzip 会查找所有重复的字符串，并用指向该字符串第一次出现的指针替换它们。

Julia Evans 创建了一种绝妙的方法来理解这一点（请参阅她的 文章和视频）。 请看这首诗的第一段

在一个漆黑的午夜，当我 {pon}dered weak an{d wea}{ry,}
翻阅许多{ a }quaint{ and }curious 遗忘的知识的书籍，
W{hile I }nodded, n{ear}ly napping, su{dde}n{ly }th{ere} ca{me }a t{apping,}
As{ of }so{me o}ne gent{ly }r{apping, }{rapping} at my chamb{er }door.
`’Tis{ some }visitor,’{ I }mu{tte}r{ed, }`t{apping at my chamber door} –
O{nly th}is,{ and }no{thi}{ng }m{ore}.

花括号内的文本已被 gzip 发现是重复的。 因此，将用占用空间更小的指针替换它。

这对于减少文件大小非常有效，尤其是在代码中，因为代码可能非常重复。 想象一下 HTML 文件中有多少个 <div 实例或 CSS 文件中有多少个 { 实例。

您可以创建文件的 gzip 版本（即 style.css.zip），但**您几乎从不这样做**，并且**浏览器也不知道如何处理它**。

在 Web 上，Gzip 是由您的服务器直接执行的。 这需要配置服务器才能执行此操作。 完成此操作后，Gzip 会自动发生，您无需执行任何其他操作。 服务器会压缩文件并以这种方式将其发送到网络。 浏览器接收文件并在使用前对其进行解压缩。 我从未听说过有人提到压缩和解压缩的开销，因此我只是假设它可以忽略不计，并且好处远远大于开销。

以下是如何在 Apache 服务器上启用它，它使用 `mod_deflate` 模块。 并且 H5BP 提供了所有流行服务器的服务器配置，其中包括 Gzip。

示例

我们将使用来自 Bootstrap 的 CSS 文件，因为它是一个非常常见的资源。

压缩 CSS 可以节省大约 17% 的空间，Gzip 可以节省 85% 的空间，或者如果同时使用两者，则可以节省 86% 的空间。

以下是检查 DevTools 中所有内容是否正常工作的理想情况

Gzip 的效果要好得多。 同时使用两者是理想的选择。

Gzip 使文件大小减少了大约五倍。 但是，您也可以从压缩中获得 一些 提升，并且由于它可能在构建步骤中几乎不需要额外的努力，因此您不妨一试。

也有一些 证据 表明浏览器可以更快地读取和解析压缩的文件

正如预期的那样，除了网络传输时间之外，压缩还有助于解析和加载。 这可能是由于缺少注释和额外空格造成的。

微软也开始 优化其解析器

因此，在 Windows 10 和 Microsoft Edge 中，我们添加了新的快速路径，改进了内联并优化了 Chakra JIT 编译器中的一些启发式算法，以确保压缩代码的运行速度与非压缩版本一样快，甚至更快。 通过这些更改，我们测试过的使用 UglifyJS 压缩的单个代码模式的性能提高了 20% 到 50%。

---

缓存资源也与此对话相关，因为没有什么比浏览器根本不需要请求资源更快了！ 网上（或书籍中）有大量关于此的信息，但我们可能很快就会发布一篇关于此的文章，其中包含一些技巧。