聊起前端性能优化,我们会首先想到减少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吧…