Nginx的静态文件合并请求,加快网站的加载速度
现在的网站表现力越来越丰富,页面加载的js和css自然也越来越多。当网站页面上的js和css太多,浏览器打开页面的速度就会很慢,明显降低了用户的体验。使用mod_concatx, 可以合并多个文件在一个http响应报文中,可以有效提高js/css的加载速度。
一直想研究这个技术,但是赖于自己的双手,今天逼着自己把这东西搞了出来,并且形成文档。
介绍:
mod_concat模块由淘宝开发,目前已经包含在tengine中,并且淘宝已经在使用这个nginx模块。不过它暂时没有包含在nginx中。这个模块类似于apache中的modconcat。如果需要使用它,需要使用两个"?"问号.
事例:http://cssijsgroup.sir.com/style/??aa/b.js,aa/a.js,aa/c.css
安装:
首先下载这个模块: wget https://github.com/alibaba/nginx-http-concat/archive/master.zip -O nginx-http-concat-master.zip
解压这模块:unzip nginx-http-concat-master.zip
重新编译nginx,编译之前为了不影响之前nginx的功能,要使用nginx -V查看以下之前的编译参数,然后在最后面增加 --add-module=../nginx-http-concat-master即可。
使用说明:
concat on | off
default: concat off
context: http, server, location
开启火关闭concat
concat_types MIME types
default: concat_types: text/css application/x-javascript
context: http, server, location
Defines the MIME types which can be concatenated in a given context.
在给定的配置段中可以被合并的MIME文件类型.
concat_unique on | off
default: concat_unique on
context: http, server, location
是否只允许同类型文件(相同MIME文件)合并。例如,设置为off,那么js和css文件可以合并。默认
情况下,这个值是on,意味着只有相同的类型文件才能合并。
如果希望js和css能够合并为一个请求,那么你必须设置concat_unique off,其他类型文件也可以用
同样的方式合并.如下为OFF才可以的请求:
http://example.com/static/??foo.css,bar/foobaz.js
concat_max_files numberp
default: concat_max_files 10
context: http, server, location
定义一个给定的配置段里面允许合并文件的数量,默认最多10个.不过一定要注意,uri不要超过系统的
规定的page size,在linux里面执行getconf PAGESIZE可以获取系统的限制.通常限制是4096字节。
concat_delimiter: string
default: NONE
context: http, server, locatione
定义文件分隔符
concat_ignore_file_error: on | off
default: off
context: http, server, location
是否忽略文件请求错误,例如404和403等
配置Nginx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
server {
listen 80;
server_name cssijsgroup.sir.com;
root /Disk/var/www/group ;
index index.html index.htm;
location / {
}
location /style/ {
concat on;
concat_max_files 20;
# 开始笔者这里没写这句话,心想nginx默认就是js和css,可是访问的时候却得到了400结果的结果
concat_types text /css application /javascript ;
concat_unique off;
}
error_page 404 500 502 503 504 /404 .html;
location = /404 .html {
root /usr/share/nginx/html ;
}
}
|
测试前准备下对应的css和js文件
1
2
3
4
5
6
7
|
root@ubuntusvn: /Disk/var/www/group/style/aa # ls
a.js b.js c.css
root@ubuntusvn: /Disk/var/www/group/style/aa # cat *
aaaaa
bbbbbb
alsdkjfcss
root@ubuntusvn: /Disk/var/www/group/style/aa #
|
测试:
1
2
3
4
5
6
7
8
9
10
|
root@ubuntusvn: /Disk/var/www/group/style/aa # curl http://cssijsgroup.sir.com/style/??aa/b.js,aa/a.js
bbbbbb
aaaaa
root@ubuntusvn: /Disk/var/www/group/style/aa # curl http://cssijsgroup.sir.com/style/??aa/b.js,aa/c.css
bbbbbb
alsdkjfcss
root@ubuntusvn: /Disk/var/www/group/style/aa # curl http://cssijsgroup.jinlejia.com/style/??aa/b.js,aa/c.css,aa/b.js
bbbbbb
alsdkjfcss
bbbbbb
|
闲聊:
如果把配置放到nginx的location /目录节点下,照样生效的,亲测,看效果:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
root@ubuntusvn: /etc/nginx/conf .d # cat /etc/nginx/conf.d/groupcssjs.conf
server {
listen 80;
server_name cssijsgroup.sir.com;
root /Disk/var/www/group ;
index index.html index.htm;
location / {
concat on;
concat_max_files 20;
concat_types text /css application /javascript ;
concat_unique off;
}
error_page 404 500 502 503 504 /404 .html;
location = /404 .html {
root /usr/share/nginx/html ;
}
}
|
测试:
1
2
3
|
root@ubuntusvn: /etc/nginx/conf .d # curl http://cssijsgroup.sir.com/??style/aa/b.js,style/aa/c.css
bbbbbb
alsdkjfcss
|
总计:
笔者最开始接触互联网的时候,做的第一个网站就是跨境电商的网站,由于前台有N多的静态文件,而且服务器托管在国外的机房中,导致网站访问的速度非常慢,当时不知道有这么一项技术,现在知道了这项技术,大大提高的我们网站的速度,从而还降低了nginx服务器的并发数,而且还降低了后台日志管理的麻烦。
Nginx的静态文件合并请求,加快网站的加载速度相关推荐
- 网站的加载速度该如何进行优化提升?
根据调查结果显示,用户一般在进行访问网站的时候最多会在加载的网页停留30-50秒,没有耐心时会直接关掉网页,这样就会提高网站的跳出率,不利于搜索引擎对网站的优化.由此可见,网站的加载速度在网站优化中也 ...
- 提高网站第一次加载速度
特别是在手机端访问,用户第一次打开网站,如果得到反馈的时间太久,用户很可能在页面完成加载之前就离开,不会再次访问.所以,网站.web App,提高首次访问的加载速度就显得特别重要了.第一次加载速度是用 ...
- 如何加快HTML页面加载速度
一:页面减肥 a:页面的肥瘦是影响加载速度最重要的因素 b:删除不必要的空格.注释 c:将inline的script和css移到外部文件 d:可以使用HTML Tidy来给HTML减肥,还可以使用一些 ...
- 网站加载速度 优化_您肯定要优化网站的加载速度。 这是如何做。
网站加载速度 优化 Do you remember this iconic scene from a very famous Star Wars Parody? 您还记得著名的<星球大战> ...
- 在windows、linux中开启nginx的Gzip压缩大大提高页面、图片加载速度转
为了降低tomcat服务的压力,把页面上的图片采用windows版的nginx进行加载,由于有些图片比较大,加载特别的慢,所以在nginx中打开了gzip的压缩功能.加载图片的速度快了很多. 通过站长 ...
- 浅析网站页面加载速度如何提升?
在当下的互联网时代中,很多人们天都离不开网络,通过浏览网页来获取信息和知识,但在用户打开网站页面时并不是每个网站的开启速度都是那么快的,有的网页就是太慢导致用户的流失,转向其他同类型的网站.那么我们应 ...
- 02、如何进行网站性能优化或怎么加快页面的加载速度
2.如何进行网站性能优化? 1) 减少HTTP请求数 合并js文件 合并css文件 雪碧图的使用(css sprite) 使用base64表示简单的图片 2)减小资源体积 gzip压缩 js混淆 cs ...
- 运维实践-使用WebP Server Go无缝转换图片为Google的webp格式让你网站访问加载速度飞起来...
关注「WeiyiGeek」公众号 设为「特别关注」每天带你玩转网络安全运维.应用开发.物联网IOT学习! 本章目录: 0x00 快速入门 WebP 介绍 Webp-Server 介绍 0x01 安装实 ...
- tomcat资源请求慢_Tomcat网页加载速度过慢的解决方法
可以vim conf/server.xml,在# OS specific support. $var _must_ be set to either true or false.下添加: JAVA_ ...
- 网页速度很慢优化方案:如何提高网页加载速度,提升网站加载速度
网站加载速度的快慢,直接影响用户的去留.这里为大家持续更新我的经验,帮你解决网页速度很慢,慢在哪里,该怎么优化的问题.希望对你有所帮助! 1. 网站空间要好:网站需要一个稳定的服务器或者虚拟机,可以 ...
最新文章
- 在vi或vim上查找字符串
- Iterator接口和for...of循环
- python软件代码示例-用Python写一个模拟qq聊天小程序的代码实例
- 转:Hibernate中Criteria和DetachedCriteria的完整用法
- Java集合:Hashtable源码分析
- 中国工业自动化行业需求现状及投资风险评估报告2022-2027年版
- perl 远程 mysql_写的一个perl脚本,用于发送远程MySQL命令
- tablefunc 行转列
- pytorch入门-简介及安装
- 编程范式之rotate操作
- 12月 Web 服务器调查:nginx 增长最快,微软市场份额最高
- “智慧城市”如火如荼 与“数字城市”又有何差别?
- IDEA + Spring boot devtools 热部署 与 多实例启动
- pyqt5写一个抽奖程序(再次美化)
- linux中孚软件,中孚主机监控与审计系统
- Android Studio实现记单词App,背完四六级一次过~
- 二级分销系统平台软件开发
- 行人三维姿态与形状估计面试准备
- 第30届深圳礼品展暨1688工厂直采季开幕,携手创增长
- C# 特殊运算符 |,,^的运用
热门文章
- iOS开发之App上架流程(2017)
- 洛谷 P2879 [USACO07JAN]区间统计Tallest Cow
- [NOIP2015] 运输计划(第二弹)
- 斐波那契数列的第N项
- 团队二阶段冲刺个人工作总结7
- 双轴按键摇杆控制器控制TFTLCD(使用ADC1双通道DMA传输)
- FragmentSharedFabTransition
- Windows Server 2003 SP2 中文版下载
- jupyter notebook 修改默认文件夹
- Eclipse中启动tomcat: java.lang.OutOfMemoryError: PermGen space的解决方法