html写法对gzip压缩率的影响

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

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

举例

<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <form action="">
        <input class="J_Textarea" type="text" name="name123" id="id1"/>
        <input class="J_Textarea" type="password" name="name223" id="id2"/>
        <input class="J_Textarea" type="radio" name="name323" id="id3"/>
        <input class="J_Textarea" type="checkbox" name="name423" id="id4"/>
    </form>
</body>
</html>

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

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

<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <form action="">
        <input class="J_Textarea" type="text" name="name123" id="id1"/>
        <input name="name123" class="J_Textarea" type="password" id="id2"/>
        <input type="radio" id="id3" name="name323" class="J_Textarea"/>
        <input id="id4" type="checkbox" class="J_Textarea" name="name423"/>
    </form>
</body>
</html>

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

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

@charset "utf-8"; 
.f1{font-size:10px; line-height: 22px; color:red;}
.f2{font-size:14px; line-height: 26px; color:green;}

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

@charset "utf-8"; 
.f1{font-size:10px; line-height: 22px; color:red;}
.f2{font-size:14px; color:green; line-height: 26px;}

gzip后的size是464B

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

@charset "utf-8"; 
.f1{font-size:10px; line-height: 22px; color:red;}
.f9{background: red;}
.f2{font-size:14px; color:green; line-height: 26px;}

size:480B

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

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

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

Size值是指网络传输内容的大小,这里面包括了Request/Response headers 的gzip大小和 文件内容的gzip大小。
Content值是指主体内容body的gzip解压后的大小, 也就是页面文件的大小。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员的知识天地

几个Python小案例,爱上Python编程!

Python是一种面向对象的解释型编程语言,源代码与解释器CPython遵守GPL协议,Python语法简洁清晰。

602
来自专栏深度学习自然语言处理

(LaTex)CTex的初次使用心得及入门教程

摘要 最近要发论文了,被知乎里人推荐使用论文编译软件(CTex、LaTex和Overleaf之类),瞬间感觉自己用Word简直Out了(书读少)。 学校里也听说...

4138
来自专栏吉浦迅科技

DAY46:阅读Surface Reference API

reads the CUDA array bound to the one-dimensional surface reference surfRef usin...

845
来自专栏小鄧子的技术博客专栏

【译】使用标签实现图像加载的分组管理

在上一篇博客中,你已经了解了如何为特定的图像请求分配优先级。因为你可能在同一时刻取消,暂停或者恢复多个图像请求,因此之前的那些技巧或许不能完全满足你的要求。如果...

682
来自专栏生信宝典

生信宝典之傻瓜式 (五) - 文献挖掘查找指定基因调控网络

如何快速查找指定基因的调控网络介绍了使用在线查询数据库 (http://evexdb.org/)对PubMed和PubMed Central中发表文章的摘要和全...

2059
来自专栏申龙斌的程序人生

零基础学编程030:像黑客般玩玩字符艺术

经常安装盗版软件的朋友可能会看到一些由字母组成的奇怪图案,比如下面这张图: ? (图片来自于网络) 在Python里,我们无法用字母拼出如此复杂的图案,但也可以...

3276
来自专栏Windows Community

Windows Community Toolkit 3.0 - Gaze Interaction

Gaze Input & Tracking - 也就是视觉输入和跟踪,是一种和鼠标/触摸屏输入非常不一样的交互方式,利用人类眼球的识别和眼球方向角度的跟踪,来判...

1103
来自专栏写写代码吃吃瓜

OpenGL初学--环境配置和视景体初步接触

1525
来自专栏小鄧子的技术博客专栏

【译】开始使用,简单加载

有经验的Android开发者可以跳过这段,而对于初学者来说:你一定会问,为什么要使用Picasso来替换目前已有的图像加载方案。

752
来自专栏WindCoder

wordpress自定义表情及管理不同表情包

一般表情图片会放在imges/smilies一类的文件夹中,具体的还要看各自主题。

683

扫码关注云+社区