一、序言

使用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;
}

原文地址

Nginx网络压缩 CSS压缩 图片压缩 JSON压缩的更多相关文章

  1. nginx js、css、图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常

    nginx js.css.图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常 http://upstreamname:port/....../. ...

  2. MVC中用 BundleCollection 压缩CSS时图片路径问题

    MVC中有个专门提供JS和CSS压缩的类,BundleCollection,其实这个类也可以在asp.net中用, 关于BundleCollection类的详细推荐个地址:http://www.cnb ...

  3. gulp 之一 安装及简单CSS,JS文件合并压缩

    最近研究了一下gulp构建工具,发现使用起来比grunt顺手一些.(个人感受),以下是grunt和gulp构建方式和原理: grunt 基于文件方式构建,会把文件先写到临时目录下,然后进行读文件,修改 ...

  4. 使用gulp对js、css、img进行合并压缩

    1 概述 最新使用AngularJS框架做单页面项目,其中包括了很多库的和自已写的js.css.img文件,这些文件都不大,但是数量众多,导致web请求文件过多,一次性加载时比较慢.有尝试过使用异步加 ...

  5. 【nginx网站性能优化篇(1)】gzip压缩与expire浏览器缓存

    gzip压缩 概述 网页在服务器端经过了gzip或者其他格式的压缩后的输出明显减少了content-length字节,当访问过百万时,这些减少的字节就会变为客观的流量给节约下来;从而减轻服务器的压力以 ...

  6. gulp打包压缩代码以及图片

    1.首先全局安装gulp 全局安装就不做介绍了 初学gulp,终于把常用的配置,api,语法弄明白了! gulp插件地址:http://gulpjs.com/plugins gulp官方网址:http ...

  7. webpack提取图片文件打包压缩

    抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一.准备测试环境 //工作区间 src//文件夹 index.js//入口文件 index.css//样式文件 inde ...

  8. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  9. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

随机推荐

  1. Java学到什么程度可以面试工作?

    ​先说结论: 1 大多数公司,对于Java初级开发的要求是,会用Spring Boot+JPA做增删改查 2 所以零基础的Java小白,无需学太多的内容,只要掌握Spring Boot+JPA做增删改 ...

  2. python xlrd读Excel表

    1 xlrd第三方库 注意:xlrd较新版本不支持读xlsx表,需安装1.2.0版本(pip install xlrd==1.2.0)或使用其他库. xlrd库官方文档:https://xlrd.re ...

  3. 大二 mysql高级+html响应式+Java高级50道试题

    1.CSS3中过渡属性 transition-timing-function的值包括哪些 A. ease B. inline C. ease-in D. easeout 答案:A,C 解析:过渡属性 ...

  4. 「会员卡管理系统」 · Java Swing + MySQL JDBC开发

    目录 目录 一.语言和环境 二.实现功能 三.数据库设计 四.具体要求及推荐实现步骤 五.注意事项 六.评分标准 >>>实现代码: 数据库 com.ynavc.Bean com.yn ...

  5. Java_Swing中让窗口居中显示的方法(三种方法)

    方法一: int windowWidth = frame.getWidth(); // 获得窗口宽    int windowHeight = frame.getHeight(); // 获得窗口高 ...

  6. UML 基本模型元素

    目录 1. 结构模型元素 (1)类(class) (2)接口(interface) (3)协作(collaboration) (4)用例(use case) (5)活动类(active class) ...

  7. 前端在线学习网站W3School

    W3School在线学习网站 http://www.w3school.com.cn/ W3School是因特网上最大的WEB开发者资源,是完全免费的,是非营利性的, 一直在升级和更新,是W3C中国社区 ...

  8. websocket在线测试工具

    为了测试websocket, 根据网上的一些工具修改了一些, 因此得到了这个工具 源码 源码: <!DOCTYPE html> <html lang="en"&g ...

  9. shell2-if判断

    1.条件测试类型(判断类型): 将测试结果做为判断依据. 测试类型有以下三种   [ 命令 ] :命令测试法(最常用的)  [[ 命令 ]] : 关键字测试 test 命令 以上是三种都可以,注意单词 ...

  10. centos7安装wordpress详细教程

    安装之前:建议安装各种软件 [root@localhost ~]# yum -y install wget zip unzip net-tools 一.安装apache 测试环境建议关闭防火墙和SEL ...