前端性能优化之网页加载提速--gzip

web网页是与用户沟通的桥梁，网页所加载的时间就显得尤为重要。如果可以尽可能的压缩文件，从而提升响应速度，特别对于移动端用户，能更大程度提升用户体验。

gzip

可以使用gzip对静态文件进行编码压缩，缩小文件，减少传输所需时间，加快用户端的网页显示，也服务器端节约网络带宽，而代价是服务器端的性能。gzip需要服务器和浏览器的共同支持，一些主流服务器nginx，tomcat，koa都支持gzip，而在http请求头中看到客户浏览器是否支持gzip编码，

nginx配置

以nginx服务器为例，配置nginx文件开启gzip，其他因数保持不变

# /etc/nginx/nginx.config
...
http {
...
  #开启gzip
  gzip  on;
  
  #以下分别为：文件压缩最小值，压缩程度(1-10)，压缩文件类型，是否在http响应头中添加Vary: Accept-Encoding，建议开启
  gzip_min_length 1k;
  gzip_comp_level 2;
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  gzip_vary on;
...
}
...

systemctl restart nginx;    #重启nginx

查看响应头发现多了gzip

原先的响应头

效果对比

开启后的文件大小(压缩程度为2 gzip_comp_level=2) 压缩程度为9时(gzip_comp_level=9)与压缩程度2的效果没有差太大 与开启前对比，文件大小改变还是比较可观的； 停用缓存下，加载时间由由原来的3s左右缩减到了1s内，

广泛使用

这种做法也是一些大型网站的基本操作了，如京东jd.com，淘宝taobao.com