UDN-企业互联网技术人气社区

板块导航

浏览  : 1968
回复  : 0

[前端] html写法对gzip压缩率的影响

[复制链接]
葡萄柚的头像 楼主
发表于 2017-1-5 15:51:34 | 显示全部楼层 |阅读模式
  Gzip算法主要由哈费曼和LZ77算法组成。 如果文件中有两块内容相同的话,那么只要知道前一块内容的位置和大小,通过特定的压缩标识符, 我们就可以确定后一块的内容。所以我们可以用位置长度这样一对信息,来替换后一块内容。

  举例
  1. <html>
  2. <head>
  3.     <title></title>
  4.     <meta charset="utf-8" />
  5. </head>
  6. <body>
  7.     <form action="">
  8.         <input class="J_Textarea" type="text" name="name123" id="id1"/>
  9.         <input class="J_Textarea" type="password" name="name223" id="id2"/>
  10.         <input class="J_Textarea" type="radio" name="name323" id="id3"/>
  11.         <input class="J_Textarea" type="checkbox" name="name423" id="id4"/>
  12.     </form>
  13. </body>
  14. </html>
复制代码

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

  下面把input标签的属性顺序打乱后:
  1. <html>
  2. <head>
  3.     <title></title>
  4.     <meta charset="utf-8" />
  5. </head>
  6. <body>
  7.     <form action="">
  8.         <input class="J_Textarea" type="text" name="name123" id="id1"/>
  9.         <input name="name123" class="J_Textarea" type="password" id="id2"/>
  10.         <input type="radio" id="id3" name="name323" class="J_Textarea"/>
  11.         <input id="id4" type="checkbox" class="J_Textarea" name="name423"/>
  12.     </form>
  13. </body>
  14. </html>
复制代码

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

  文章内容大概如此,那么,我果断想了一下,CSS是不是也会有类似效果呢? 先把CSS文件中的属性都按顺序写:
  1. @charset "utf-8";
  2. .f1{font-size:10px; line-height: 22px; color:red;}
  3. .f2{font-size:14px; line-height: 26px; color:green;}
复制代码

  gzip看到的size是463B 属性打乱顺序后:
  1. @charset "utf-8";
  2. .f1{font-size:10px; line-height: 22px; color:red;}
  3. .f2{font-size:14px; color:green; line-height: 26px;}
复制代码

  gzip后的size是464B

  由此得出结论,那么不仅是html, 连CSS也有类似效果。 也许有人会问,行与行之间如果有其他class那结果会怎样呢?
  1. @charset "utf-8";
  2. .f1{font-size:10px; line-height: 22px; color:red;}
  3. .f9{background: red;}
  4. .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的大小。但通常不会输出这个字段。

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部