Nginx网络压缩 CSS压缩 图片压缩 JSON压缩

简介: 使用Nginx作为web应用服务时,会代理如下常见文件:`js`、`css`、`JSON`、`图片`等,本文提供基于Nginx内置的压缩技术,提供网络请求响应速度的解决方案。网络压缩的原理是消耗CPU资源,减少文件在公网传输的大小,提高响应速度。相比于CPU的计算资源,网络带宽通常较为昂贵,因此通过CPU资源置换网络带宽资源在实际生产中是可行的操作方案。

一、序言

使用Nginx作为web应用服务时,会代理如下常见文件:jscssJSON图片等,本文提供基于Nginx内置的压缩技术,提供网络请求响应速度的解决方案。

1、网络压缩原理

网络压缩的原理是消耗CPU资源,减少文件在公网传输的大小,提高响应速度。相比于CPU的计算资源,网络带宽通常较为昂贵,因此通过CPU资源置换网络带宽资源在实际生产中是可行的操作方案。

二、网络压缩

此部分所有的压缩内容在浏览器端都会还原,特别需要指出的是图片,图片在网络间是压缩状态传输的,到达浏览器后是会被还原的。

技术实现依托gzip压缩,仅仅在服务器与客户端网络传输时对静态资源进程压缩,文件的大小在压缩前与还原后保持不变。

(一)Web资源

1、静态资源

前端项目中js/css文件越来越大,对其执行压缩处理越来越有必要。

gzip on;
gzip_comp_level 5;
gzip_min_length 10K;
gzip_types application/javascript text/css;
2、动态资源

通过代理后端服务返回的JSON数据属于动态资源的一种。对于一些较大的JSON响应体,为加快响应速度,通常也需要做压缩处理。

gzip on;
gzip_comp_level 5;
gzip_min_length 50K;
gzip_types application/json;

(二)图片资源

1、图片文件

常见的图片文件格式有PNG、JPG、JPEG。

gzip on;
gzip_comp_level 5;
gzip_min_length 50K;
gzip_types image/jpeg image/gif image/png;

三、图片压缩

Nginx能够动态实现常见格式图片的压缩与裁剪,动态减小网络传输的文件大小。图片压缩分为两类:一是等比压缩;二是固定宽高压缩。根据应用场景的不同也分为两类:一是固定参数;二是动态参数。

此部分图片压缩后到达浏览器不会被还原。

(一)等比压缩

使用关键词resize实现等比压缩,指定宽度或者高度即可在原尺寸图片的基础上等比率压缩图片。如果同时指定宽度和高度,只有一个参数生效。

1、静态参数

固定宽度,高度自适应

location / {
    image_filter resize 320 -;
}

固定高度,宽度自适应

location / {
    image_filter resize - 320;
}
2、动态参数

资源uri路径与静态资源存储路径保持一致。

动态指定宽度,高度自适应

location ~* /(.+)\.(jpg|jpeg|gif|png)!(\d+)$ {
    image_filter resize  $3 -;
    image_filter_buffer  10M;
    try_files /$1.$2  /default.png;
    root   html;
}

(二)固定宽高压缩

使用关键词crop实现等宽等高裁剪。

1、静态参数

固定裁剪

location / {
    image_filter crop 1080 1080;
}
2、动态参数
location ~* /(.+)\.(jpg|jpeg|gif|png)!(\d+)x(\d+)$ {
    image_filter crop  $3 $4;
    image_filter_buffer  10M;
    try_files /$1.$2  /default.png;
    root   html;
}

(三)默认图片

try_files指令设置默认图片资源,如果找不到对应资源,则使用默认图片。

location ~* /(.+)\.(jpg|jpeg|gif|png)$ {
    try_files /$1.$2  /default.png;
    root   html;
}

2.007.jpeg

原文地址

相关文章
|
4月前
|
负载均衡 算法 应用服务中间件
面试题:Nginx有哪些负载均衡算法?Nginx位于七层网络结构中的哪一层?
字节跳动面试题:Nginx有哪些负载均衡算法?Nginx位于七层网络结构中的哪一层?
110 0
|
16天前
|
XML JSON 前端开发
json字符串CSS格式化
完成以上步骤后,你便能在网页中看到格式化后的JSON数据,它们将按照CSS定义的样式进行展示,使数据更易于阅读和理解。通过有效地结合JSON和CSS,你可以创建出更加丰富且易于交互的网页内容。
154 64
|
11天前
|
XML JSON 前端开发
json字符串CSS格式化
json字符串CSS格式化
22 4
|
1月前
|
监控 网络协议 应用服务中间件
高并发下Nginx压缩
【8月更文挑战第16天】gzip压缩在Nginx中可减少传输数据量,加快响应速度但消耗CPU。可在http、server及location级别配置。高并发时,启用Nginx状态监控以检查性能,配置`nginx.conf`添加`location /NginxStatus { stub_status on; access_log off; }`并重启Nginx
38 12
|
29天前
|
缓存 负载均衡 应用服务中间件
Nginx 代理管理器强势登场!轻松设置反向代理,为你的网络安全与高效护航,快来探索!
【8月更文挑战第23天】Nginx 代理管理器(NPM)是一款强大的工具,用于简化反向代理的设置流程。反向代理能隐藏后端服务器的真实IP,提升安全性,实现负载均衡与缓存等功能。用户需先安装Nginx 代理管理器,然后通过其Web界面添加代理主机,指定代理名称、协议类型、服务器地址及端口等信息。对于HTTPS协议,还需上传SSL证书/密钥。完成设置后,可通过浏览器测试反向代理是否正常工作。Nginx 代理管理器还支持高级特性,如负载均衡、缓存及访问控制等。
51 1
|
30天前
|
缓存 负载均衡 应用服务中间件
【揭秘】nginx代理配置全攻略:从零到精通,一文带你玩转高效网络代理的秘密武器!
【8月更文挑战第22天】nginx是一款高性能的HTTP与反向代理服务器,支持代理服务、负载均衡及缓存等功能,有助于提升网站响应速度和安全性。首先需确保已安装nginx,可通过包管理器进行安装。安装后启动并确认nginx运行状态。接着编辑配置文件(通常位于`/etc/nginx/nginx.conf`),设置代理转发规则,例如指定目标服务器地址和请求头信息。配置完成后测试有效性并重新加载nginx以应用更改。可以通过部署简易HTTP服务器验证代理功能是否正常工作。此外,还可以通过扩展配置文件实现更复杂的代理需求,如基于路径的代理和SSL加密等。
183 2
|
1月前
|
运维 算法 应用服务中间件
运维系列.Nginx中使用HTTP压缩功能(一)
运维系列.Nginx中使用HTTP压缩功能(一)
31 1
|
1月前
|
应用服务中间件 nginx
nginx配置gzip压缩
nginx配置gzip压缩
|
2月前
|
存储 缓存 前端开发
(三)Nginx一网打尽:动静分离、压缩、缓存、黑白名单、跨域、高可用、性能优化...想要的这都有!
早期的业务都是基于单体节点部署,由于前期访问流量不大,因此单体结构也可满足需求,但随着业务增长,流量也越来越大,那么最终单台服务器受到的访问压力也会逐步增高。时间一长,单台服务器性能无法跟上业务增长,就会造成线上频繁宕机的现象发生,最终导致系统瘫痪无法继续处理用户的请求。
|
1月前
|
缓存 应用服务中间件 nginx
运维系列.Nginx中使用HTTP压缩功能(二)
运维系列.Nginx中使用HTTP压缩功能(二)
29 0