134

前几天我进行了一场关于缩小 Javascript 和 CSS 与更喜欢使用 Gzip 的人的热烈讨论。

我会称这个人为 X。

X 说 Gzip 已经压缩了代码，因为它压缩了你的文件。

我不同意。Zip 是一种无损压缩文件大小的方法。无损意味着必须完美地恢复原件，这意味着必须存储信息才能恢复空格、不需要的字符、注释代码和其他所有内容。这会占用更多空间，因为必须压缩更多空间。

我没有测试的方法，但我相信这段代码的Gzip：

.a1 {
    background-color:#FFFFFF;
    padding: 40px 40px 40px 40px;
}

仍将大于此代码的 Gzip：

.a1{body:background-color:#FFF;padding:40px}

有没有人可以证明这是对还是错。
并且请不要说“这是正确的，因为这是我一直使用的”。

我在这里要求科学证明。

4

13 回答 13

198

测试非常简单。我拿走了你的 js，把它们放在不同的文件中，然后对它们运行 gzip -9。这是结果。这是在运行 Cygwin 和 gzip 1.3.12 的 WinXP 机器上完成的。

-rwx------  1 xxxxxxxx mkgroup-l-d     88 Apr 30 09:17 expanded.js.gz

-rwx------  1 xxxxxxxx mkgroup-l-d     81 Apr 30 09:18 minified.js.gz

这是使用真实 JS 示例的进一步测试。源文件为“common.js”，原始文件大小为 73134 字节。缩小后，它达到 26232 字节。

原始文件：

-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 73134 Apr 13 11:41 common.js

缩小文件：

-rwxr-xr-x 1 xxxxxxxx mkgroup-l-d 26232 Apr 30 10:39 common-min.js

使用 -9 选项压缩的原始文件（与上述版本相同）：

-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 12402 Apr 13 11:41 common.js.gz

使用 -9 选项压缩的压缩文件（与上述相同的版本）：

-rwxr-xr-x 1 xxxxxxxx mkgroup-l-d  5608 Apr 30 10:39 common-min.js.gz

如您所见，各种方法之间存在明显差异。最好的办法是压缩和压缩它们。

于 2009-04-30T14:20:25.060 回答
28

这是我不久前使用我网站上的“现实生活”CSS 文件进行的一项测试的结果。CSS 优化器用于缩小。Ubuntu 附带的标准 Linux 归档应用程序用于 Gzipping。

原始：28,781字节
缩小：22,242字节
Gzipped：6,969字节
Min+Gzip：5,990字节

我个人的意见是首先选择 Gzipping，因为这显然是最大的不同。至于缩小，这取决于你的工作方式。您必须保留原始 CSS 文件才能进一步进行编辑。如果每次更改后都不会打扰您缩小它，那么就去做吧。

（注意：还有其他解决方案，例如在提供文件时通过压缩器“按需”运行它，并将其缓存在文件系统中。）

于 2009-05-17T11:55:29.860 回答
16

测试时要小心：这两个 CSS 片段非常小，因此它们无法从 GZIP 压缩中受益——仅添加 GZIP 的小页眉和页脚（大约 20 字节开销）将失去所获得的收益。实际上，您不会有这么小的 CSS 文件并担心压缩它。

minify+gzip 压缩的不仅仅是 gzip

原始问题的答案是，是的，minify + gzip 将获得比 g​​zip 更多的压缩。对于任何重要的示例（即任何有用的超过几百字节的 JS 或 CSS 代码）都是如此。

对于这种效果的示例，获取可用的压缩和未压缩的 Jquery 源代码，使用 gzip 压缩它们并查看。

值得注意的是，与优化的 CSS 相比，Javascript 从缩小中获得的好处要多得多，但仍然有好处。

推理：

GZIP 压缩是无损的。这意味着它必须存储所有文本，包括确切的空格、注释、长变量名等，以便以后可以完美地复制它们。另一方面，缩小是有损的。如果你缩小你的代码，你会从你的代码中删除大部分信息，只留下更少的 GZIP 需要保留的信息。

  • 缩小会丢弃不必要的空格，仅在出于语法原因需要的地方留下空格。
  • 缩小会删除评论。
  • 代码缩小可以用更短的名称替换标识符名称，而不会产生副作用。
  • 代码缩小可能会对代码进行微不足道的“编译器优化”，这只能通过实际解析代码来实现
  • CSS 缩小可以消除冗余规则或组合具有相同选择器的规则。
于 2009-04-30T15:05:17.403 回答
12

你是对的。

缩小与 gzipping 不同（如果是这种情况，它们将被称为相同）。例如，gzip 不一样：

var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;

比缩小最终得到类似的东西：

var a = null;

当然，我会说在大多数情况下，最好的方法是先压缩 FIRST，然后再压缩 Gzip，而不仅仅是压缩或压缩，尽管有时根据代码，压缩或压缩会比两者都提供更好的结果。

于 2009-04-30T14:20:40.100 回答
7

gzip 编码是有优势的。一般规则是：文件越大，压缩效果越好，gzip 会胜出。当然，您可以先缩小，然后再压缩。

但是，如果我们在不超过 100 字节长的一小段文本上讨论 gzip 与缩小，那么“客观”比较是不可靠的，甚至是毫无意义的——除非我们拿出基线文本来建立标准的基准测试方法，类似于 Lorem Ipsum 类型，但用 Javascript 或 CSS 编写。

因此，让我建议使用我的Fat-Free Minify (PHP) 代码对最新版本的 jQuery 和 MooTools（未压缩版本）进行基准测试（只是简单地去除空格和注释，不缩短变量，不使用 baseX 编码）

以下是 minify 与 gzip（保守的 5 级压缩）与 minify+gzip 的结果：

MooTools-Core
-------------
Baseline 102,991 bytes
Minified 79,414 (77.1% of original)
Gzipped 27,406 (26.6%)
Minified+Gzipped 22,446 (21.8%)

jQuery
------
Baseline 170,095
Minified 99,735 (58.6% of original)
Gzipped 46,501 (27.3%)
Minified+Gzipped 27,938 (16.4%)

在任何人开枪之前，这不是 JS 库之战。

如您所见，缩小+gzipping 可以更好地压缩大文件。缩小代码有其优势，但主要因素是原始代码中存在多少空白和注释。在这种情况下，jQuery 具有更多功能，因此可以提供更好的缩小效果（内联文档中有更多的空格）。Gzip 压缩的优势在于内容中有多少重复。因此，这与缩小与 gzip 无关。他们做事不同。通过使用两者，您可以获得两全其美。

于 2010-02-20T05:15:49.810 回答
5

为什么不两者都用？

于 2009-04-30T14:19:50.663 回答
1

它很容易测试：只需将您的 css 文本放入文本文件中，然后使用 linux 上的 gzip 之类的存档器压缩文件。

我刚刚完成了这个，碰巧第一个 css 的大小是 184 字节，第二个 css 的大小是 162 字节。

所以，你是对的，即使对于 gzip 文件，空白也很重要，但是从这个小测试中可以看出，对于非常小的文件，压缩文件的大小可能大于原始文件的大小。

这只是由于您的示例的大小非常小，对于较大的文件，gzipping 将使您获得较小的文件。

于 2009-04-30T14:18:15.393 回答
1

我没有看到有人提到 Mangling，所以我在上面发布了我的结果。

以下是我使用 UflifyJS 进行缩小和 Gzip 得出的一些数字。我有大约 20 个文件，它们以大约 2.5MB 的大小与评论和所有内容连接在一起。

连接文件 2.5MB

uglify({
    mangle: false
})

缩小后不变形：929kb

uglify({
    mangle: true
})

缩小和损坏：617kb

现在，如果我将这些文件压缩并压缩，我将分别得到 239kb 和 190kb。

于 2015-05-05T00:52:47.617 回答
0

有一个非常简单的测试方法：创建一个仅包含空格的文件和另一个真正为空的文件。然后 Gzip 两者并比较它们的大小。带有空格的文件当然会更大。

于 2009-04-30T14:18:41.930 回答
0

当然，保留布局或其他一些重要内容并删除任何不需要的垃圾（空格、注释、冗余内容等）的“人为”有损压缩将比无损 gZip 压缩更好。

例如，标记或函数名称之类的东西很可能有一定的长度来描述含义。用一个字符长的名称替换它可以节省很多空间，并且在无损压缩中是不可能的。

顺便说一句，对于 CSS，有一些工具，如CSS 压缩器，可以为您完成有损工作。

但是，当结合“有损优化”和无损压缩时，您将获得最佳结果。

于 2009-04-30T14:19:07.200 回答
0

当然，您可以测试 - 将您的文件写入文件并使用zlib对其进行 gzip 压缩。您也可以尝试使用“gzip”实用程序。

回到你的问题 - 源的长度和压缩结果之间没有明确的关系。关键是“熵”（源中的每个元素有多么不同）。

所以，这取决于你的来源。例如，许多连续的空格（例如，> 1000）可能会被压缩为与少数（例如，< 10）个空格相同的大小。

于 2009-04-30T14:21:51.640 回答
0

这是压缩两个文件时的结果

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz
于 2009-04-30T14:21:57.147 回答
-1

你是对的，minify+gzip 会减少字节数。虽然没有科学证据。

你怎么没有测试方法？

在一个文件中缩小您的代码，并将其“未缩小”在另一个文件中。上传到能够对输出进行 gzip 压缩的网络服务器（例如，用于 Apache 的 mod_deflate），为 firefox 安装 Firebug 扩展，清除缓存并访问这两个文件。Firebug 的“NET”选项卡将包含传输的确切数据量，比较这些数据，您就有了“经验”证明。

于 2009-04-30T14:25:17.983 回答