1. 网页压缩javascript
网页压缩是一项由 WEB 服务器和浏览器之间共同遵照的协议,也就是说 WEB 服务器和浏览器都必须支持该技术,所幸的是如今流行的浏览器都是支持的,包括 IE、FireFox、Opera 等;服务器有 Apache 和 IIS 等。双方的协商过程以下:
首先浏览器请求某个 URL 地址,并在请求的头 (head) 中设置属性 accept-encoding 值为 gzip, deflate,代表浏览器支持 gzip 和 deflate 这两种压缩方式(事实上 deflate 也是使用 gzip 压缩协议,下面咱们会介绍两者之间的区别);php
WEB 服务器接收到请求后判断浏览器是否支持压缩,若是支持就传送压缩后的响应内容,不然传送不通过压缩的内容;
浏览器获取响应内容后,判断内容是否被压缩,若是是则解压缩,而后显示响应页面的内容。css
在实际的应用中咱们发现压缩的比率每每在 3 到 10 倍,也就是原本 50k 大小的页面,采用压缩后实际传输的内容大小只有 5 至 15k 大小,这能够大大节省服务器的网络带宽,同时若是应用程序的响应足够快时,网站的速度瓶颈就转到了网络的传输速度上,所以内容压缩后就能够大大的提高页面的浏览速度。html
2. 配置启用gzip前端
gzip on; gzip_min_length 5k; gzip_buffers 4 16k; #gzip_http_version 1.0; gzip_comp_level 3; gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary on;
1):wq保存退出,从新加载Nginxjava
/usr/local/nginx/sbin/nginx -s reloadjquery
2)配置指令详细注释:
gzip on|off
# 默认值: gzip off
# 开启或者关闭gzip模块 nginx
gzip_static on|off
# nginx对于静态文件的处理模块
# 该模块能够读取预先压缩的gz文件,这样能够减小每次请求进行gzip压缩的CPU资源消耗。该模块启用后,nginx首先检查是否存在请求静态文件的gz结尾的文件,若是有则直接返回该gz文件内容。为了要兼容不支持gzip的浏览器,启用gzip_static模块就必须同时保留原始静态文件和gz文件。这样的话,在有大量静态文件的状况下,将会大大增长磁盘空间。咱们能够利用nginx的反向代理功能实现只保留gz文件。
# 能够google"nginx gzip_static"了解更多后端
gzip_comp_level 4
# 默认值:1(建议选择为4)
# gzip压缩比/压缩级别,压缩级别 1-9,级别越高压缩率越大,固然压缩时间也就越长(传输快但比较消耗cpu)。浏览器
gzip_buffers 4 16k
# 默认值: gzip_buffers 4 4k/8k
# 设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流。 例如 4 4k 表明以4k为单位,按照原始数据大小以4k为单位的4倍申请内存。 4 8k 表明以8k为单位,按照原始数据大小以8k为单位的4倍申请内存。
# 若是没有设置,默认值是申请跟原始数据相同大小的内存空间去存储gzip压缩结果。
gzip_types mime-type [mime-type ...]
# 默认值: gzip_types text/html (默认不对js/css文件进行压缩)
# 压缩类型,匹配MIME类型进行压缩
# 不能用通配符 text/*
# (不管是否指定)text/html默认已经压缩
# 设置哪压缩种文本文件可参考 conf/mime.types
gzip_min_length 1k
# 默认值: 0 ,无论页面多大都压缩
# 设置容许压缩的页面最小字节数,页面字节数从header头中的Content-Length中进行获取。
# 建议设置成大于1k的字节数,小于1k可能会越压越大。 即: gzip_min_length 1024
gzip_http_version 1.0|1.1
# 默认值: gzip_http_version 1.1(就是说对HTTP/1.1协议的请求才会进行gzip压缩)
# 识别http的协议版本。因为早期的一些浏览器或者http客户端,可能不支持gzip自解压,用户就会看到乱码,因此作一些判断仍是有必要的。
# 注:99.99%的浏览器基本上都支持gzip解压了,因此能够不用设这个值,保持系统默认便可。
# 假设咱们使用的是默认值1.1,若是咱们使用了proxy_pass进行反向代理,那么nginx和后端的upstream server之间是用HTTP/1.0协议通讯的,若是咱们使用nginx经过反向代理作Cache Server,并且前端的nginx没有开启gzip,同时,咱们后端的nginx上没有设置gzip_http_version为1.0,那么Cache的url将不会进行gzip压缩
gzip_proxied [off|expired|no-cache|no-store|private|no_last_modified|no_etag|auth|any] ...
# 默认值:off
# Nginx做为反向代理的时候启用,开启或者关闭后端服务器返回的结果,匹配的前提是后端服务器必需要返回包含"Via"的 header头。
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_modified - 启用压缩,若是header头中不包含 "Last-Modified" 头信息
no_etag - 启用压缩 ,若是header头中不包含 "ETag" 头信息
auth - 启用压缩 , 若是header头中包含 "Authorization" 头信息
any - 无条件启用压缩
gzip_vary on
# 和http头有关系,加个vary头,给代理服务器用的,有的浏览器支持压缩,有的不支持,因此避免浪费不支持的也压缩,因此根据客户端的HTTP头来判断,是否须要压缩
gzip_disable "MSIE [1-6]."
# 禁用IE6的gzip压缩,又是由于杯具的IE6。固然,IE6目前依然普遍的存在,因此这里你也能够设置为“MSIE [1-5].”
# IE6的某些版本对gzip的压缩支持很很差,会形成页面的假死,今天产品的同窗就测试出了这个问题
后来调试后,发现是对img进行gzip后形成IE6的假死,把对img的gzip压缩去掉后就正常了
为了确保其它的IE6版本不出问题,因此建议加上gzip_disable的设置
3. 使用curl测试
curl -I -H "Accept-Encoding: gzip, deflate" "http://www.slyar.com/blog/" HTTP/1.1 200 OK Server: nginx/1.0.15 Date: Sun, 26 Aug 2012 18:13:09 GMT Content-Type: text/html; charset=UTF-8 Connection: keep-alive X-Powered-By: PHP/5.2.17p1 X-Pingback: http://www.slyar.com/blog/xmlrpc.php Content-Encoding: gzip 页面成功压缩 curl -I -H "Accept-Encoding: gzip, deflate" "http://www.slyar.com/blog/wp-content/plugins/photonic/include/css/photonic.css" HTTP/1.1 200 OK Server: nginx/1.0.15 Date: Sun, 26 Aug 2012 18:21:25 GMT Content-Type: text/css Last-Modified: Sun, 26 Aug 2012 15:17:07 GMT Connection: keep-alive Expires: Mon, 27 Aug 2012 06:21:25 GMT Cache-Control: max-age=43200 Content-Encoding: gzip css文件成功压缩 curl -I -H "Accept-Encoding: gzip, deflate" "http://www.slyar.com/blog/wp-includes/js/jquery/jquery.js" HTTP/1.1 200 OK Server: nginx/1.0.15 Date: Sun, 26 Aug 2012 18:21:38 GMT Content-Type: application/x-javascript Last-Modified: Thu, 12 Jul 2012 17:42:45 GMT Connection: keep-alive Expires: Mon, 27 Aug 2012 06:21:38 GMT Cache-Control: max-age=43200 Content-Encoding: gzip js文件成功压缩 curl -I -H "Accept-Encoding: gzip, deflate" "http://www.slyar.com/blog/wp-content/uploads/2012/08/2012-08-23_203542.png" HTTP/1.1 200 OK Server: nginx/1.0.15 Date: Sun, 26 Aug 2012 18:22:45 GMT Content-Type: image/png Last-Modified: Thu, 23 Aug 2012 13:50:53 GMT Connection: keep-alive Expires: Tue, 25 Sep 2012 18:22:45 GMT Cache-Control: max-age=2592000 Content-Encoding: gzip 图片成功压缩 curl -I -H "Accept-Encoding: gzip, deflate" "http://www.slyar.com/blog/wp-content/plugins/wp-multicollinks/wp-multicollinks.css" HTTP/1.1 200 OK Server: nginx/1.0.15 Date: Sun, 26 Aug 2012 18:23:27 GMT Content-Type: text/css Content-Length: 180 Last-Modified: Sat, 02 May 2009 08:46:15 GMT Connection: keep-alive Expires: Mon, 27 Aug 2012 06:23:27 GMT Cache-Control: max-age=43200 Accept-Ranges: bytes 最后来个不到1K的文件,因为个人阈值是1K,因此没压缩