•  03-07-2019
  •  | 
  •  

题

我有点活泼的讨论的关于精简Javascript和CSS与的人更喜欢使用Gzip。

我会打电话给这个人X.

X说，Gzip已经minifies代码，由于你的拉链文件。

我不同意。拉链是一个 无损 方法的萎缩filesize.无损的装置原来必须完全恢复，意味着信息必须存放到能够恢复的空间，联合国需要的人物，评论的代码和其他一切。这需要更多空间，因为更多的必须加以压缩。

我有没有方法的试验，但我认为，Gzip这个代号：

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

仍然会比Gzip这个代号：

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

是不是有谁可以证明这个正确或错误。
请不来说"这是正确的，因为这是什么我总是使用"。

我要求对科学证据在这里。

有帮助吗？

解决方案

测试非常简单。我拿了你的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示例的进一步测试。源文件是<！> quot; common.js <！> quot;原始文件大小为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选项gzip原始文件（与上面相同的版本）： 

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

使用-9选项gzipped缩小文件（与上面相同的版本）： 

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

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

其他提示

以下是使用<！>“真实生活<！>来自我网站的CSS文件。 CSS Optimiser 用于缩小。 Ubuntu附带的标准Linux归档应用程序用于Gzipping。

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

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

（注意：还有其他解决方案，例如在提供文件时通过minifier <！>“on-demand <！>”运行它，并在文件系统中缓存它。）

在测试这样的：这两段的CSS是平凡小，所以他们不受益于GZIP compression-加GZIP的小标题单独会失去所取得的成果。在现实中你会不会有一个CSS文件，这个小而关心压缩。

缩小+gzip压缩超过只是gzip

答案的最初的问题是，是的，缩小+gzip将获得大量更多的压缩比gzip。这是真实的任何非微不足道的例子(即任何有用的JS或CSS代码超过几百个字节)。

对于这方面的例子中的作用， 抓住Jquery的源代码 这是可以精简和压缩的压缩它们都与gzip看一看。

值得注意的是，Javascript好处很多，从缩小比以及优化CSS，但仍有一个好处。

推理：

GZIP compression是无损的。这意味着它具有储存所有文本，包括确切的空白，评论，只要的变量名称等，使他们能够完美地再现以后。另一方面，缩小是有损的。如果你压缩你的代码，你去除多的信息，从你的代码，而使不那GZIP需要保护。

  • 缩小放弃不必要的空白，使空间只有在必要的语法的原因。
  • 缩小删除的意见。
  • 代码缩小可能的替代标识符的名称，与较短的名称在那里不会有副作用。
  • 代码缩小可能使微不足道'的编译器优化'的代码这是唯一可能通过实际分析代码
  • CSS缩小可能消除多余的规则或结合的规则具有相同的选择。

你是对的。

缩小比gzipping不同（如果是这样的话，它们将被称为相同）。例如，gzip这是不一样的：

var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;

然后缩小最终结果：

var a = null;

当然，在大多数情况下，我会说最好的方法是缩小FIRST然后缩小Gzip，而不仅仅是缩小或压缩，尽管取决于代码，有时只是缩小或gzipping会给你比两者都更好的结果。

有一个门槛在其gzip-编码是有利的。一般的规则是：较大的文件，更好地压缩和gzip将赢得手了。当然你也可以缩小第一然后gzip之后。

但是，如果我们谈论的是与gzip缩小在一块小小的文字没有超过100bytes长，一个"目标"的比较是不可靠的，甚至是毫无意义，除非我们拿出一个基线文本，用于建立一个标准的手段的基准，就像一个存有类型的但是写在Javascript或CSS。

因此，让我提出基准的最新版本的能力和脱(未压缩版本)使用我的 脂肪的缩减 (PHP)代码(只是普通的剥关空格和评论，没有缩短的变数，没有baseX编码)

这里的结果是缩小与gzip(在保守的5级压缩)与缩小+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库。

正如你可以看到，简化+gzip压缩给你更好的压缩 在大文件.缩小的代码有其优点，但主要的因素是多少空白和意见是存在的原始代码。在这种情况。有更多的所以它提供了更好的缩小(更多空格在内的文档).Gzip压缩的力量是多少重复存在的内容。因此，它不是关于缩小与gzip。他们做不同的事情。和你得到最好的两个世界通过使用这两者。

为什么不同时使用？

很容易测试：只需将css的文本放在文本文件中，然后使用像linux上的gzip这样的归档文件来压缩文件。

我刚刚完成了这个，而且对于第一个css，它的大小是184个字节 而对于第二个162字节。

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

这只是因为您的示例的大小非常小，对于较大的文件，gzipping会为您提供较小的文件。

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

以下是我使用UflifyJS进行缩小和Gzip的一些数据。我有大约20个文件，我用大约2.5MB连接在一起评论和所有。

Concat文件2.5MB 

uglify({
    mangle: false
})

缩小而不破损：929kb 

uglify({
    mangle: true
})

缩小和损坏：617kb

现在，如果我拿这些文件并对它们进行gzip，我将分别得到239kb和190kb。

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

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

例如，标记或函数名称之类的内容很可能具有一定的长度来描述其含义。用一个字符长的名称替换它将节省很多空间，并且无法进行无损压缩。

顺便说一下，对于CSS，有像 CSS压缩器这样的工具那将为你做有损的工作。

但是，在组合<！>“有损优化<！>”时，您将获得最佳效果。和无损压缩。

当然，您可以测试 - 将您的文件写入文件并使用 zlib 进行gzip。您也可以尝试使用<！>“gzip <！>”;实用程序。

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

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

这是gziping两个文件时的结果

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz

你是正确的，minify + gzip结果更少的字节。但是没有科学证据。

你怎么没有测试方法？

将代码缩小到一个文件中，并保留<！> quot; unminified <！> quot;另外一个。上传到能够gziping输出的web服务器（例如，用于Apache的mod_deflate），为firefox安装Firebug扩展，清除缓存并访问这两个文件。 Firebug的<！>“NET <！>”;选项卡将包含传输的确切数据量，比较那些并且您有<！> quot; empirical <！> quot;证明。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top