一、序言

使用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. 论文翻译:2019_Deep Neural Network Based Regression Approach for A coustic Echo Cancellation

    论文地址:https://dl.acm.org/doi/abs/10.1145/3330393.3330399 基于深度神经网络的回声消除回归方法 摘要 声学回声消除器(AEC)的目的是消除近端传声器 ...

  2. Centos/Docker/Nginx/Node/Jenkins 操作

    Centos Centos 是一个基于 Linux 的开源免费操作系统 # 本地拷贝文件到远程服务器scp output.txt root@47.93.242.155:/data/ output.tx ...

  3. MongoDB 变更流(Change Stream)介绍

    1. 什么是Change Stream Change Stream 是MongoDB用于实现变更追踪的解决方案,类似于关系数据库的触发器,但原理不完全相同: | | Change Stream | 触 ...

  4. html基础 button按钮标签

    场景:在网页中显示用户点击的按钮标签名:button 注意:form不能少,少了不会出效果 html代码 <form > 昵称: <input type="text&quo ...

  5. vi中使用鼠标右键插入时进入(insert)visual模式

    使用vim插入外面复制的内容时,用右键点击后,并未将内容粘贴进去,而是进入了(insert)visual模式,解决方法:先shift+enter进入普通模式输入 set mouse-=a然后再i进入i ...

  6. 面试题68 - II. 二叉树的最近公共祖先

    <搜索树结点> <获取路径> 题目描述 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先. 百度百科中最近公共祖先的定义为:"对于有根树 T 的两个结点 p.q ...

  7. Hive的分析函数的使用

    原文: https://www.toutiao.com/i6769120000578945544/?group_id=6769120000578945544 我们先准备数据库.表和数据 开窗分析函数相 ...

  8. JSR-303规范

    规范链接 CONSTRAINT 详细信息 @Valid 被注释的元素是一个对象,需要检查此对象的所有字段值 @Null 被注释的元素必须为 null @NotNull 被注释的元素必须不为 null ...

  9. 2022 跳槽涨薪必不可少面试通关宝典 —— css 篇

    生于忧患死于安乐!已经居家隔离 23 天了,解封以后估计就得找工作了,提前准备起来!需要的赶紧收藏起来 一.谈谈你对 BFC 的理解及作用. BFC 是 Block Formatting Contex ...

  10. 解决nRF Connect for PC无法连接网络的问题(非FQ)

    各位小伙伴是不是也遇到过国内不能正常使用nRF Connect的问题,现在教大家一个十分有效的办法. 1.找到nrf connect的脚本配置文件"apps.json",默认在&q ...