前言

gzip是一种大幅度压缩数据大小的技术、压缩比例甚至能达到70%以上。被压缩的资源会变成gzip的数据格式,在响应头中加入Content-Encoding: gzip字段。而浏览器识别到这种格式之后会自动解析处理无需后续加工,高效而简单~
nginx中提供了实现gzip的功能模块

一、gzip的两种模式

gzip可以放置在http server location if块中

动态压缩

动态压缩是在请求来到服务器之后,如果请求的资源|数据满足我们的设置的压缩条件,则将其压缩后响应。每一个请求来到之后都需要进行判断压缩

location / {
            gzip on; #开启gzip压缩输出
	        gzip_min_length 1k; #最小压缩文件大小
	        gzip_buffers 4 16k; #压缩缓冲区
	        gzip_http_version 1.0; #压缩版本(默认1.1,前端如果是squid2.5请使用1.0)
	        gzip_comp_level 9; #压缩等级1-9,等级越高压缩越猛,也越耗性能
	        gzip_types text/plain application/x-javascript text/css application/xml; #压缩类型
	        gzip_vary on; #增加响应头'Vary: Accept-Encoding'
		}

静态压缩

静态压缩是将原本的资源文件压缩成gzip,当请求来到的时候判断资源存在对应的gzip资源(随便一个压缩工具都可以压缩,前端也可以使用构建工具创造),则将gzip资源响应。这里有两个注意的点

  • 源文件需要存在:假定请求/index.js文件。那么你的服务器上需存在/index.js /index.js.gz两个文件,如果没有index.js文件判断为404,如果没有index.js.gz文件则认定无压缩文件,响应源文件
  • 源文件和gz文件的创建时间和修改时间建议要保持一致,否则不生效。官方上的建议The files can be compressed using the gzip command, or any other compatible one. It is recommended that the modification date and time of original and compressed files be the same
	gzip on; #开启gzip压缩输出
	gzip_min_length 1k; #最小压缩文件大小
	gzip_buffers 4 16k; #压缩缓冲区
	gzip_http_version 1.0; #压缩版本(默认1.1,前端如果是squid2.5请使用1.0)
	gzip_comp_level 2; #压缩等级
	gzip_types text/plain application/x-javascript text/css application/xml; #压缩类型
	gzip_vary on; #增加响应头'Vary: Accept-Encoding'

    gzip_static on; # 开启静态压缩
    
	#当作为反向代理服务器时,是否对目标服务器的响应结果进行压缩
	gzip_proxied off | expired | no-cache | no-store | private | no_last_modified | no_etag | auth | any;

gzip_proxied配置项解释

选项说明
off关闭Nginx服务器对后台服务器返回结果的Gzip压缩
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无条件启用压缩

使用原则

  • 对于媒体资源(img、视频、音频)不应该使用gzip压缩,因为在上传服务器之前,一般会尽可能的压缩此类资源体积。经过压缩后的文件再用gzip压缩,并没有意义。
  • 接口数据是否可以使用gzip?也是可以使用的,数据本身也是文本流。但是因为接口数据是根据请求参数而变化的动态数据。并且一般接口数据体量都比较小所以几乎不会用到gzip

二、浏览器对gzip的支持和解析

  • 服务器如何知道浏览器是否支持gzip
    几乎所有的浏览器都支持gzip,当浏览器支持gzip时,会自动在请求头上加入Accept-Encoding: gzip。后台识别到请求带有这个字段,就可以开启gzip
  • 浏览器得到gzip类型数据后如何进行解析
    浏览器有自己的解析策略,当识别到响应的是gzip格式的数据(响应头带有Content-Encoding: gzip),就会自动进行解析,不需要手动操作。

三、一些奇怪的问题

  • gzip_proxied有点奇怪,官网上是说,当作为代理服务器时,可以通过它配置对目标服务器响应结果进行gzip的行为。但是我在实际的使用上,却并没有发现它对gzip的行为有所改变。我只要配置了gzip:on,那不管我设置gzip_proxied的值为啥,对压缩结果都没有影响,不知道是我设置的不对还是本身就是一个坑。有经验的同学可留言指教下,下面是我的location配置
    location / {
            gzip on; #开启gzip压缩输出
            gzip_min_length 1k; #最小压缩文件大小
            gzip_buffers 4 16k; #压缩缓冲区
            gzip_http_version 1.0; #压缩版本(默认1.1,前端如果是squid2.5请使用1.0)
            gzip_comp_level 2; #压缩等级
            gzip_types text/plain application/x-javascript text/css application/xml; #压缩类型
            gzip_vary on; #增加响应头'Vary: Accept-Encoding'
    
            gzip_static on; # 开启静态压缩
            gzip_proxied expired;
    	}
    
  • HTML文件当我开启静态压缩时,即便html没有对应的html.zg文件,也会进行gzip压缩,其他的文件js、css就不会。难道当nginx.exe识别html没有对应的html.gz文件时会对html实时压缩?下面是我的location配置
    location / {
        gzip on; #开启gzip压缩输出
        gzip_min_length 1k; #最小压缩文件大小
        gzip_buffers 4 16k; #压缩缓冲区
        gzip_http_version 1.0; #压缩版本(默认1.1,前端如果是squid2.5请使用1.0)
        gzip_comp_level 2; #压缩等级
        gzip_types text/plain application/x-javascript text/css application/xml; #压缩类型
        gzip_vary on; #增加响应头'Vary: Accept-Encoding'
    
        gzip_static on; # 开启静态压缩
        gzip_proxied expired;
    }
    

四、在chrome浏览器中查看是否开启了gzip

打开f12、选中请求,点击右键

在这里插入图片描述

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐