聊起前端性能优化,我们会首先想到减少http请求,使用CDN,Gulp构建,webpack构建等等…
这些方案都有一些复杂,单单webpack的构建脚本编写起来就不是个容易的事儿。
所以今天向大家介绍一个方式,不用我们动手,便可以将前端性能提高超10%的方案。
那就是Gzip。
之所以说不用我们动手,是因为这个工作一般都是运维帮忙做了。
但事情别人帮忙做了,不代表我们不需要了解。

一、什么是Gzip

Gzip 是一个压缩工具包,里边装了很多种文件压缩工具。与 win 平台 ZIP 类似。
通常 Gzip 仅用来压缩单个文件,生成 .gz 文件。
多个文件的压缩归档通常是首先将这些文件合并成一个 tar 文件,
然后再使用 Gzip 进行压缩,最后生成 .tar.gz 或者 .tgz 文件。

二.Gzip在网络请求中的应用

Gzip 是 linux 系统中常用压缩命令,能有效的减小文件体积。
那这项技术能否运用到网络请求中呢?
是否可以对网络请求的静态资源进行压缩后传递呢?
答案是可以的,
Apache, nginx, Node.js 等 web 容器都支持 Gzip 压缩功能。
使用 Gzip 会有两个明显的优点:

1.提高客户端加载速度。文件小了,加载快了。
2.节省网络带宽。文件经过压缩之后再进行网络传递,对整体的带宽占用会大大降低。

当然任何一种技术都会有缺点,Gzip 的缺点就是需要占用服务器和客户端的性能。
服务器端需要对文件进行压缩,客户端需要解压。必然会占用一部分 CPU 性能。
但是这笔账算下来还是合适的,少量的 CPU 性能损耗,带来用户体验的量级提高,是值得的。

三.使用前后效果对比

介绍完了基础知识,下面我们先看看使用效果。
以我的博客为例:www.isjs.cn
对开启Gzip前后的页面数据做一下对比。

未开启Gzip:
网络: Slow 3G(慢网络)
缓存: 禁用
请求数: 49
文件大小:1.2M
DOM 加载时间: 15.14s
load 时间: 31.03s
效果:

注意图中红色圈选位置,是所有 js 文件的请求记录。
Size 属性有两个值,上面深色的是请求数据的大小。
下方浅色的是该数据的实际大小。
观察前两条请求记录,发现实际请求的大小,和文件的大小几乎一致。
这就说明该网站没有对请求进行压缩,是原封不动的直接返回。

开启Gzip:
网络: Slow 3G(慢网络)
缓存: 禁用
请求数: 50
文件大小:942KB
DOM 加载时间: 13.1s
load 时间: 25.95s
效果:

同样观察右侧资源加载大小,下方浅色数字未发生变化,因为资源文件并没有因为开启 Gzip 而增大减小。
但是上方深色数字变化比较大,实际网络请求大小,减少了 60%

开启前后数据对比:
文件大小: 减少23%
DOM 加载时间: 减少13%
load 时间: 减少16%

以上就是小型博客的数据对比。因为博客大图较多,数据差异不明显。
接下来我们看一下 Gzip 对 React Spa 项目的优化如何:

未开启Gzip:
网络: Slow 3G(慢网络)
缓存: 禁用
请求数: 39
文件大小:1.7M
DOM 加载时间: 22.34s
load 时间: 43.51s
效果:

开启Gzip:
网络: Slow 3G(慢网络)
缓存: 禁用
请求数: 39
文件大小:1024KB
DOM 加载时间: 11.83s
load 时间: 30.92s
效果:

开启前后数据对比:
文件大小: 减少41%
DOM 加载时间: 减少46%
load 时间: 减少29%

四.如何开启Gzip

看完了前面的效果对比是不是感觉棒呆了?
js,css 文件的传输大小减少了 40% 左右。
那接下来,我们聊一聊如何开启 Gzip

1.nginx 开启 Gzip
在conf中找到nginx.conf文件,从中找到以下内容

gzip on;
gzip_min_length  1000;
gzip_buffers     4 16k;
# gzip_http_version 1.0;
gzip_comp_level 9;
gzip_types       text/plain application/javascript pplication/x-javascript text/css application/xml text/javascript;
gzip_vary on;
gzip_proxied        expired no-cache no-store private auth;
gzip_disable        "MSIE [1-6]\.";

配置时要注意 gzip_comp_level 属性的值越大,压缩效果越好,取值 1-9
gzip_types 为静态资源的Content-Type属性,注意javascript有多种类型。
gzip_disable 属性设置哪些浏览器不开启Gzip

2.Node.js开启Gzip
我们通常使用Node来搭建自己的web服务,下面介绍express框架下开启Gzip的方式。
安装 compression 组件:

$ cnpm install compression --save

使用组件实现Gzip:

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

app.use(compression({level: 9}));

app.listen(‘8080’,() => {
	console.log('代理服务器已启动。');
});

五.总结

Gzip 一般运维会帮大家配置好,但难免会有遗漏。
作为前端开发,我们也有必要去了解,去学习,去检查。
让我们的产品体验更好。
本篇文章定位为基础知识,带大家大致了解一下 Gzip。
知识点如下:
什么是 Gzip?
怎么区分是否开启 Gzip?
怎么开启 Gzip?
快去查查你的网站有没有开启Gzip吧…