前几天在群里看到小杜分享一篇文章，《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; color:red; line-height: 22px;}

.f9{background: red;}

.f2{font-size:14px; color:green; line-height: 26px;}

size:482B

@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的大小。但通常不会输出这个字段。

html写法对gzip压缩率的影响的更多相关文章

  1. Nginx 开启gzip压缩(图片,文件,css)

    1.Vim打开Nginx配置文件 vim /usr/local/nginx/conf/nginx.conf 2.找到如下一段,进行修改 gzip on; gzip_min_length 1k; gzi ...

  2. 压缩工具gzip、bzip2、xz的使用

    2019独角兽企业重金招聘Python工程师标准>>> 本文使用 为了要压缩 常见压缩格式 压缩工具 gzip压缩工具 bz2压缩工具 xz压缩工具 为什么要压缩 为什么要压缩?文件 ...

  3. 大数据查询——HBase读写设计与实践

    导语:本文介绍的项目主要解决 check 和 opinion2 张历史数据表(历史数据是指当业务发生过程中的完整中间流程和结果数据)的在线查询.原实现基于 Oracle 提供存储查询服务,随着数据量的 ...

  4. html-minifier中文文档

    HTMLMinifier是一个高度可配置的.经过良好测试的.基于javascript的HTML缩小器.参见相应的博客文章,了解它的工作原理.每个选项的描述.测试结果和结论.在线测试套件.还可以看到相应 ...

  5. HADOOP与HDFS数据压缩格式

    1.cloudera 数据压缩的一般准则 一般准则 是否压缩数据以及使用何种压缩格式对性能具有重要的影响.在数据压缩上,需要考虑的最重要的两个方面是 MapReduce 作业和存储在 HBase 中的 ...

  6. Hadoop（八）Hadoop数据压缩与企业级优化

    一 Hadoop数据压缩 1.1 概述 压缩技术能够有效减少底层存储系统(HDFS)读写字节数.压缩提高了网络带宽和磁盘空间的效率.在Hadood下,尤其是数据规模很大和工作负载密集的情况下,使用数据 ...

  7. 大数据查询——HBase读写设计与实践--转

    背景介绍 本项目主要解决 check 和 opinion2 张历史数据表(历史数据是指当业务发生过程中的完整中间流程和结果数据)的在线查询.原实现基于 Oracle 提供存储查询服务,随着数据量的不断 ...

  8. 【Hadoop】Hadoop的数据压缩方式

    概述 ​ 压缩技术能够有效减少底层存储系统(HDFS)读写字节数.压缩提高了网络带宽和磁盘空间的效率.在Hadoop下,尤其是数据规模很大和工作负载密集的情况下,使用数据压缩显得非常重要.在这种情况下 ...

  9. Hadoop支持的压缩格式对比和应用场景以及Hadoop native库

    对于文件的存储.传输.磁盘IO读取等操作在使用Hadoop生态圈的存储系统时是非常常见的,而文件的大小等直接影响了这些操作的速度以及对磁盘空间的消耗. 此时,一种常用的方式就是对文件进行压缩.但文件被 ...

随机推荐

  1. Android 多点触控与简单手势（一）

    现在一般的Android手机都会使用电容触摸屏最少可以支持两点触摸,多的可能是七八个,所以基本上都会支持多点触控, android系统中应用程序可以使用多点触控的事件来完成各种手势和场景需求. And ...

  2. 使用DotNetOpenAuth搭建OAuth2.0授权框架——Demo代码简单说明

    前段时间随意抽离了一部分代码作为OAuth2的示例代码,若干处会造成困扰,现说明如下: public class OAuthController : Controller { private stat ...

  3. C++学习基础六——复制构造函数和赋值操作符

    1.什么是复制构造函数 复制构造函数:是构造函数,其只有一个参数,参数类型是所属类的类型,且参数是一个const引用. 作用:将本类的成员变量赋值为引用形参的成员变量. 2.什么是赋值操作符 赋值操作 ...

  4. logging日志模块

    为什么要做日志: 审计跟踪:但错误发生时,你需要清除知道该如何处理,通过对日志跟踪,你可以获取该错误发生的具体环境,你需要确切知道什么是什么引起该错误,什么对该错误不会造成影响. 跟踪应用的警告和错误 ...

  5. idea 到myeclipse

    在上一篇博客使用maven进行开发过程管理之准备篇中提到了maven的基本概念.IT男罗书全觉得概念我是懂了,但是那些东西似乎离我很远啊.先开发再说吧, 于是IT男罗书全就在svn上取了源代码,并开始 ...

  6. Flume NG简介及配置

    Flume下载地址:http://apache.fayea.com/flume/ 常用的分布式日志收集系统: Apache Flume. Facebook Scribe. Apache Chukwa ...

  7. MySQL5.7.10免安装版配置

     最新版的 Mysql 不提供图形界面的安装了, 下载下来是一个压缩包的形式, 那么我们如何来使用它呢, 让它为我们工作呢? 环境: mysql-5.7.10-winx64 + win7(64位) 一 ...

  8. Linux(centos)系统各个目录的作用详解

    Linux(centos)系统各个目录的作用详解 文件系统的类型 LINUX有四种基本文件系统类型:普通文件.目录文件.连接文件和特殊文件,可用file命令来识别. 普通文件:如文本文件.C语言元代码 ...

  9. codevs1230 元素查找

    1230 元素查找  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description 给出n个正整数,然后有m个询问,每 ...

  10. 解决方法:An error occurred on the server when processing the URL. Please contact the system administrator

    在WINDOWS7或SERVER2008上安装了IIS7.5,调试ASP程序时出现以下错误: An error occurred on the server when processing the U ...