本文先从本身测试的例子开始演示,让你们看看优化的效果,而后再介绍gizp的概念等javascript
第一张图片是没有开启gzip的效果,加载js文件3.6m花了3.11s
第二张图片是开启gzip的效果,加载同一个js文件大小被压缩成了1.2m,花了1.84scss
因此明显能够看出来文件压缩的效果仍是很好的,大大的缩减了http资源请求的时间html
网页压缩是一项由 WEB 服务器和浏览器之间共同遵照的协议,也就是说 WEB 服务器和浏览器都必须支持该技术,所幸的是如今流行的浏览器都是支持的,包括 IE、FireFox、Opera 等;服务器有 Apache 和 IIS 等。双方的协商过程以下:
首先浏览器请求某个 URL 地址,并在请求的头 (head) 中设置属性 accept-encoding 值为 gzip, deflate,代表浏览器支持 gzip 和 deflate 这两种压缩方式(事实上 deflate 也是使用 gzip 压缩协议,下面咱们会介绍两者之间的区别);java
WEB 服务器接收到请求后判断浏览器是否支持压缩,若是支持就传送压缩后的响应内容,不然传送不通过压缩的内容;
浏览器获取响应内容后,判断内容是否被压缩,若是是则解压缩,而后显示响应页面的内容。浏览器
在实际的应用中咱们发现压缩的比率每每在 3 到 10 倍,也就是原本 50k 大小的页面,采用压缩后实际传输的内容大小只有 5 至 15k 大小,这能够大大节省服务器的网络带宽,同时若是应用程序的响应足够快时,网站的速度瓶颈就转到了网络的传输速度上,所以内容压缩后就能够大大的提高页面的浏览速度。服务器
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
#gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss image/jpeg image/gif image/png image/svg+xml;
gzip_vary off;
gzip_proxied expired no-cache no-store private auth;
gzip_disable "MSIE [1-6].";网络
....排版还不太会....
参考连接app