这篇博客主要介绍什么是静态资源。nginx将图片,文件等类型压缩来减少http请求数来达到优化前端性能,可以在一定程度上能减少web服务器的压力
1.静态资源类型
前端向后台服务器进行请求,一般分为两种静态请求
和动态请求
。静态请求常见列子客户端请求图片,css,js,html文件等。动态请求是需要服务进行动态运算,封装数据然后在返回给客户端。
静态类型 | 种类 |
---|
浏览器端渲染 | HTML、CSS、JS |
图片 | JPEG、GIF、PNG |
视频 | FLV、MPEG |
文件 | TXT、等任意下载文件 |
2.静态资源服务场景cdn
CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。
3.ngx_http_gzip_module
1.gzip
启用或禁用gzipping响应。
Syntax: gzip on | off;
Default: gzip off;
Context: http, server, location, if in location
2.gzip_buffers
设置用于压缩响应的缓冲区的数量和大小。默认情况下,缓冲区大小等于一个内存页面。这是4K或8K,具体取决于平台。
Syntax: gzip_buffers number size;
Default: gzip_buffers 32 4k|16 8k;
Context: http, server, location
3.gzip_comp_level
设置响应的gzip压缩级别。可接受的值范围为1到9。
Syntax: gzip_comp_level level;
Default: gzip_comp_level 1;
Context: http, server, location
4.gzip_disable
对具有与任何指定正则表达式匹配的User-Agent
标头字段的请求禁用gzipping响应。
Syntax: gzip_disable regex ...;
Default: —
Context: http, server, location
5.gzip_http_version
设置压缩响应所需的最低HTTP请求版本。
Syntax: gzip_http_version 1.0 | 1.1;
Default: gzip_http_version 1.1;
Context: http, server, location
6.gzip_min_length
设置将被gzip压缩的响应的最小长度。长度仅由“Content-Length”响应头字段确定。
Syntax: gzip_min_length length;
Default: gzip_min_length 20;
Context: http, server, location
7.gzip_proxied
根据请求和响应启用或禁用对代理请求的响应的gzipping。代理请求的事实由“Via”请求头字段的存在确定。该指令接受多个参数:
Syntax: gzip_proxied off | expired | no-cache | no-store | private | no_last_modified | no_etag | auth | any ...;
Default: gzip_proxied off;
Context: http, server, location
参数 | 说明 |
---|
off | 禁用所有代理请求的压缩,忽略其他参数 |
expired | 如果响应头包含“Expires”字段,其值为禁用缓存,则启用压缩 |
no-cache | 如果响应头包含带有“no-cache”参数的“Cache-Control”字段,则启用压缩 |
no-store | 如果响应头包含带有“no-store”参数的“Cache-Control”字段,则启用压缩 |
private | 如果响应头包含带有“private”参数的“Cache-Control”字段,则启用压缩 |
no_last_modified | 如果响应头不包含“Last-Modified”字段,则启用压缩 |
no_etag | 如果响应头不包含“ETag”字段,则启用压缩 |
auth | 如果请求标头包含“授权”字段,则启用压缩 |
any | 为所有代理请求启用压缩 |
8.gzip_types
除了“text / html”之外,还允许对指定的MIME类型进行gzipping响应。特殊值“*”匹配任何MIME类型(0.8.29)。始终压缩“text / html”类型的响应。
Syntax: gzip_types mime-type ...;
Default: gzip_types text/html;
Context: http, server, location
9.gzip_vary
如果指令gzip,gzip_static或gunzip处于活动状态,则启用或禁用插入“Vary:Accept-Encoding”响应头字段。
Syntax: gzip_vary on | off;
Default: gzip_vary off;
Context: http, server, location
4.示例配置
1.图片配置
location ~ .*\.(jpg|gif|png)$ {
root /opt/app/code/images;
gzip on;
gzip_http_version 1.1;
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;
}
2.文件下载
location ~ .*\.(txt|xml)$ {
root /opt/app/code/doc;
gzip on;
gzip_http_version 1.1;
gzip_comp_level 1;
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;
}
3.预读gzip功能
location ~ ^/download {
root /opt/app/code;
gzip_static on;
tcp_nopush on;
}