前几天我有一个关于缩小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}
有没有人可以证明这是对还是错.
请不要说"这是正确的,因为这是我一直使用的".
我在这里要求科学证明.
测试非常简单.我拿了你的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选项进行gzip压缩(与上面相同的版本):
-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 12402 Apr 13 11:41 common.js.gz
缩小文件gzip -9选项(与上面相同的版本):
-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字节
Gzipip:6,969字节
Min + Gzip:5,990字节
我个人的意见是首先去Gzipping,因为这显然是最大的区别.至于缩小,取决于你的工作方式.您必须保留原始CSS文件,以便进一步编辑.如果它不打扰你在每次更改后缩小它,那就去吧.
(注意:还有其他解决方案,例如在提供文件时"按需"通过缩放器运行,并在文件系统中缓存它.)
在测试时要小心:这两个CSS片段很小,所以它们不会受益于GZIP压缩 - 单独添加GZIP的小标头会失去所获得的收益.实际上,你不会有这么小的CSS文件,并担心压缩它.
minify + gzip压缩不仅仅是gzip
原始问题的答案是,是的,minify + gzip将比gzip获得更多的压缩.对于任何非平凡的示例(即任何超过几百个字节的任何有用的JS或CSS代码)都是如此.
有关这方面的示例,请抓取可用缩小和未压缩的Jquery源代码,使用gzip压缩它们并查看.
值得注意的是,Javascript从简化中获益远远超过优化良好的CSS,但仍然有一个好处.
推理:
GZIP压缩是无损的.这意味着它必须存储所有文本,包括确切的空格,注释,长变量名等,以便以后可以完美地再现它们.另一方面,缩小是有损的.如果您缩小代码,则会从代码中删除大部分此类信息,从而减少GZIP需要保留的内容.
缩小不必要地丢弃空格,仅在语法原因的必要时留下空格.
缩小删除评论.
代码缩小可以用没有副作用的较短名称替换标识符名称.
代码缩小可能会对代码进行简单的"编译器优化",这只能通过实际解析代码来实现
CSS缩小可以消除冗余规则或组合具有相同选择器的规则.
你是对的.
缩小比gzipping更不一样(如果是这样的话,它们将被称为相同).例如,gzip这是不一样的:
var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;
比缩小最终得到类似的东西:
var a = null;
当然,在大多数情况下,我会说最好的方法是缩小FIRST然后缩小Gzip,而不仅仅是缩小或压缩,尽管取决于代码,有时只是缩小或gzipping会给你比两者都更好的结果.
有一个阈值,gzip编码是有利的.一般规则是:文件越大,压缩效果越好,gzip就会胜出.当然你可以先缩小然后再缩小gzip.
但是,如果我们谈论gzip与minify一小段不超过100字节,那么"客观"比较是不可靠的,甚至是毫无意义的 - 除非我们提出基线文本来建立标准的基准测试方法,像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压缩的强度在于内容中有多少重复.所以这不是关于minify与gzip的关系.他们做的事情不同.通过使用两者,你可以获得两全其美的效果.
为什么不同时使用?