前端性能优化之gzip

前言：

若是你是个前端开发人员，你确定知道线上环境要把js，css，图片等压缩，尽可能减小文件的大小，提高响应速度，特别是对移动端，这个很是重要。经常使用的前端性能优化方法有以下几种

1、减小http请求

2、CSS Sprites

3、使用oss及CDN加速

四 、css,js代码压缩

5、将样式表放在头部，将脚本放在底部

六   精简JavaScript，内存的管理，堆栈的释放

七   避免重定向

八  浏览器渲染页面原理，服务端渲染

九  客户端和服务端开启gzip

下面咱们来着重讲一下gzip

前端压缩的方式不少，依赖java的有ant工具，前端本身打包压缩的有grunt，gulp，webpack，这些压缩也很重要，基本上能压缩50%以上，下面咱们对压缩文件来个对比，如图所示，这是未压缩的

 

这是压缩后的

高能预警！！！gzip能在压缩的基础上再进行压缩50%以上！！！

gzip压缩原理

可是不是每一个浏览器都支持gzip的，若是知道客户端是否支持gzip呢，请求头中有个Accept-Encoding来标识对压缩的支持。客户端http请求头声明浏览器支持的压缩方式，服务端配置启用压缩，压缩的文件类型，压缩方式。当客户端请求到服务端的时候，服务器解析请求头，若是客户端支持gzip压缩，响应时对请求的资源进行压缩并返回给客户端，浏览器按照本身的方式解析，在http响应头，咱们能够看到content-encoding:gzip，这是指服务端使用了gzip的压缩方式。

那么怎么看有没有用gzip压缩的文件呢，打开f12，查看network，点击“use large rows”表情来查看更多信息。包含了压缩之后的大小和源文件的大小。

奇迹般的，主页从187kb压缩到了59kb。

content-encoding是gzip的话就说明返回的是gzip

还有一点 gzip不压缩图片，由于压缩以后会更大- -，因此通常到是压缩css和js

如何启用gzip

前面说过了，启用gzip须要客户端和服务端的支持，若是客户端支持gzip的解析，那么只要服务端可以返回gzip的文件就能够启用gzip了，如今来讲一下几种不一样的环境下的服务端如何配置

 

node端

var compression = require('compression')
var app = express();

//尽可能在其余中间件前使用compression
app.use(compression());

这是基本用法，若是还要对请求进行过滤的话，还要加上

app.use(compression({filter: shouldCompress}))

function shouldCompress (req, res) {
  if (req.headers['x-no-compression']) {
    // 这里就过滤掉了请求头包含'x-no-compression'
    return false
  }

  return compression.filter(req, res)
}

若是用的是koa，用法和上面的差很少

const compress = require('koa-compress');
const app = module.exports = new Koa();
app.use(compress());

由于node读取的是生成目录中的文件，因此要先用webpack等其余工具进行压缩成gzip，webpack的配置以下

const CompressionWebpackPlugin = require('compression-webpack-plugin');
plugins.push(
    new CompressionWebpackPlugin({
        asset: '[path].gz[query]',// 目标文件名
        algorithm: 'gzip',// 使用gzip压缩
        test: new RegExp(
            '\\.(js|css)$' // 压缩 js 与 css
        ),
        threshold: 10240,// 资源文件大于10240B=10kB时会被压缩
        minRatio: 0.8 // 最小压缩比达到0.8时才会被压缩
    })
);

plugins是webpack的插件

nginx

gzip使用环境:http,server,location,if(x),通常把它定义在nginx.conf的http{…..}之间

• gzip on
  on为启用，off为关闭
• gzip_min_length 1k
  设置容许压缩的页面最小字节数，页面字节数从header头中的Content-Length中进行获取。默认值是0，无论页面多大都压缩。建议设置成大于1k的字节数，小于1k可能会越压越大。
• gzip_buffers 4 16k
  获取多少内存用于缓存压缩结果，‘4 16k’表示以16k*4为单位得到
• gzip_comp_level 5
  gzip压缩比（1~9），越小压缩效果越差，可是越大处理越慢，因此通常取中间值;
• gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php
  对特定的MIME类型生效,其中'text/html’被系统强制启用
• gzip_http_version 1.1
  识别http协议的版本,早起浏览器可能不支持gzip自解压,用户会看到乱码
• gzip_vary on
  启用应答头"Vary: Accept-Encoding"
• gzip_proxied off
  nginx作为反向代理时启用,off(关闭全部代理结果的数据的压缩),expired(启用压缩,若是header头中包括"Expires"头信息),no-cache(启用压缩,header头中包含"Cache-Control:no-cache"),no-store(启用压缩,header头中包含"Cache-Control:no-store"),private(启用压缩,header头中包含"Cache-Control:private"),no_last_modefied(启用压缩,header头中不包含"Last-Modified"),no_etag(启用压缩,若是header头中不包含"Etag"头信息),auth(启用压缩,若是header头中包含"Authorization"头信息)
• gzip_disable msie6
  (IE5.5和IE6 SP1使用msie6参数来禁止gzip压缩 )指定哪些不须要gzip压缩的浏览器(将和User-Agents进行匹配),依赖于PCRE库

警告

gzip压缩的出现如此的使人振奋，可是还有如下三个注意点： 
- 低版本浏览器：一些浏览器接受压缩文件仍是有问题（他们说他们能够可是他们并不行），若是你的站点必须在window95的网景1.0浏览器上，你可能不想要压缩文件。Apache mod_deflate设置了一些忽略规则来专门为旧浏览器。 
- 已经压缩过的文件:大多数的图片，音乐和视频都已经压缩过了，不要浪费时间来压缩他们了。事实上，你能够只压缩那三巨头（HTML,CSS AND JAVARSCRIPT)。 
- CPU负载：在传输过程当中压缩文件耗费CPU可是节省带宽（用空间换时间）。一般压缩速率的选择须要权衡利弊。也存在一些预压缩静态文件的方法，但这要求更多的资源。考虑了cpu的耗费，压缩文件也是利大于弊。经过压缩实现更好的用户体验，更短的留白时间，值！

---

开启gzip压缩是优化网站最快的方法之一。大胆的用吧，让你的用户体验更棒。