html js css的gzip压缩该怎么弄?有什么优缺点?

html gzip css js by Xudong Zhang @ 2015-10-12 11:37:17

经常看到一些第三方的js库说gzip压缩后大小是多少(比如jquery.min.js是80kb,gzip后约30kb),这个gzip该怎么去实现?

gzip很有必要么?有什么优点和缺点?有浏览器兼容问题么?


关于浏览器兼容方面基本没有问题,从IE6起都没有问题(2001年后的浏览器应该都没问题).

缺点:

gzip压缩过程稍微增加CPU的负荷,具体增加多少跟选择的压缩级别有关系.

优点:

  1. gzip压缩对于文本特别是html这种压缩率很高,就是提问说的,像jquery.min.js这种都能压缩到原来的30%左右. 对于普通html基本都能压缩到20%.

  2. 压缩后自然就节省了传输的带宽,提高了网络利用率.

  3. 对于用户来说,提高了访问速度(减少下载时间), 节省了流量(特别是手机用户).

实现

一般都是通过web服务器配置来实现的,并不需要对文件进行压缩. 以我的nginx为例 (nginx官方文档):

server {
    listen  80;

    gzip  on;
    gzip_http_version  1.1;
    gzip_comp_level  2;
    gzip_min_length  512;
    gzip_proxied any;
    gzip_vary on;
    gzip_types
        text/plain
        text/css
        text/javascript
        text/xml
        application/javascript
        application/json
        application/x-javascript
        application/xml
        application/xml+rss;
        #text/html are always compressed
    ...
}

一点解释:

gzip_comp_level可以设置为1到9,越大压缩率越高当然也就越耗cpu,个人认为没有必要设置得太高,基本上从2开始,压缩率提高的幅度就很小了.比如设置为1可能压缩率为25%, 设置为2是22%,3是21%,9是17%.

gzip_min_length是设置一个压缩阈值的,对于太小的文件比如不到1k这种,压缩节省不了多少文件大小还有耗费cpu,甚至有些小文件比如50b这种压缩后的大小反而比不压缩还要大.

by Xudong Zhang @2015-10-12 12:02:40.729 +0800 CST


我来回答

Markdown格式技巧

  • 行尾添加2个空格或者添加一个空行就能换行
  • 斜体: *hello* 或者 _world_
  • 加粗: **hello** 或者 __world__
  • 代码块: 添加空行,然后代码缩进4个空格
  • 特殊字符: 用\避免转义;\*就是*本身
  • python: `__name__`可以以代码形式输出__name__
  • 一个简单的例子

切换到移动版