理论 | HTML写法对gzip压缩率的影响

作者｜zzbozheng

原文｜http://imweb.io/topic/586b2206b3ce6d8e3f9f99ce

前几天在群里看到小杜分享一篇文章，《html写法对gzip压缩率的影响》，为此我也对这点分析了一下。 不知道大家有没有看过这文章，作者是来自微博懒懒交流会，其内容我这里先简述一下。

Gzip算法主要由哈费曼和LZ77算法组成。 如果文件中有两块内容相同的话，那么只要知道前一块内容的位置和大小，通过特定的压缩标识符， 我们就可以确定后一块的内容。所以我们可以用位置长度这样一对信息，来替换后一块内容。

举例

通过gzip压缩后，在chrome的开发者工具看到的size是563B。

下面把input标签的属性顺序打乱后：

gzip压缩，看到的size是578B。

文章内容大概如此，那么，我果断想了一下，CSS是不是也会有类似效果呢？ 先把CSS文件中的属性都按顺序写：

gzip看到的size是463B 属性打乱顺序后：

gzip后的size是464B

由此得出结论，那么不仅是html, 连CSS也有类似效果。 也许有人会问，行与行之间如果有其他class那结果会怎样呢？

size:480B

这样结果和上面的结论不一样了。 可见，行与行之间的连续性对压缩率也可能会产生影响。 换句话来说，代码相似率越大，压缩率就越高。 不管是从压缩率方面还是从代码整齐美观方面来讲，我们应该把代码按顺序写，方便了团队，也方便了压缩。

chrome开发者工具的network里面size/content值不同之处：

除了研究这方面以外，我发现了chrome的开发者工具中的Network/Size栏有些难理解。 对他的Size和Content纠结了很久。不明白他们分别表示什么意思。有时size比content值大，有时size比content值小。 经过CJ的指点和自己的实验，得以下结果：

1、Size值是指网络传输内容的大小，这里面包括了Request/Response headers 的gzip大小和 文件内容的gzip大小。

2、Content值是指主体内容body的gzip解压后的大小, 也就是页面文件的大小。

如果你看到Size比Content值大，说明他的headers也比body的gzip解压后大得多了, 反之亦然。 可能你会发现，页面第一次访问得到的size值比刷新后的size值要少很多。那是因为页面开启了缓存，自然就无需求再重新从网络加载一次。 个人感觉FireBug的值比Chrome的值要直观，FireBug上面的大小是gzip的值。好像在chrome中没发现有gzip的大小。 除非如果服务器端有返回头信息中有Content-Length字段，那么也可以从这个字段看到gzip的大小。但通常不会输出这个字段。

扫码下方二维码，

随时关注更多前端干货文章！

▼

微信：IMWebTech