现在的网站表现力越来越丰富,页面加载的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服务器的并发数,而且还降低了后台日志管理的麻烦。

本文转自 xinsir999 51CTO博客,原文链接:http://blog.51cto.com/xinsir/1970189,如需转载请自行联系原作者

Nginx的静态文件合并请求,加快网站的加载速度相关推荐

  1. 网站的加载速度该如何进行优化提升?

    根据调查结果显示,用户一般在进行访问网站的时候最多会在加载的网页停留30-50秒,没有耐心时会直接关掉网页,这样就会提高网站的跳出率,不利于搜索引擎对网站的优化.由此可见,网站的加载速度在网站优化中也 ...

  2. 提高网站第一次加载速度

    特别是在手机端访问,用户第一次打开网站,如果得到反馈的时间太久,用户很可能在页面完成加载之前就离开,不会再次访问.所以,网站.web App,提高首次访问的加载速度就显得特别重要了.第一次加载速度是用 ...

  3. 如何加快HTML页面加载速度

    一:页面减肥 a:页面的肥瘦是影响加载速度最重要的因素 b:删除不必要的空格.注释 c:将inline的script和css移到外部文件 d:可以使用HTML Tidy来给HTML减肥,还可以使用一些 ...

  4. 网站加载速度 优化_您肯定要优化网站的加载速度。 这是如何做。

    网站加载速度 优化 Do you remember this iconic scene from a very famous Star Wars Parody? 您还记得著名的<星球大战> ...

  5. 在windows、linux中开启nginx的Gzip压缩大大提高页面、图片加载速度转

    为了降低tomcat服务的压力,把页面上的图片采用windows版的nginx进行加载,由于有些图片比较大,加载特别的慢,所以在nginx中打开了gzip的压缩功能.加载图片的速度快了很多. 通过站长 ...

  6. 浅析网站页面加载速度如何提升?

    在当下的互联网时代中,很多人们天都离不开网络,通过浏览网页来获取信息和知识,但在用户打开网站页面时并不是每个网站的开启速度都是那么快的,有的网页就是太慢导致用户的流失,转向其他同类型的网站.那么我们应 ...

  7. 02、如何进行网站性能优化或怎么加快页面的加载速度

    2.如何进行网站性能优化? 1) 减少HTTP请求数 合并js文件 合并css文件 雪碧图的使用(css sprite) 使用base64表示简单的图片 2)减小资源体积 gzip压缩 js混淆 cs ...

  8. 运维实践-使用WebP Server Go无缝转换图片为Google的webp格式让你网站访问加载速度飞起来...

    关注「WeiyiGeek」公众号 设为「特别关注」每天带你玩转网络安全运维.应用开发.物联网IOT学习! 本章目录: 0x00 快速入门 WebP 介绍 Webp-Server 介绍 0x01 安装实 ...

  9. tomcat资源请求慢_Tomcat网页加载速度过慢的解决方法

    可以vim conf/server.xml,在# OS specific support.  $var _must_ be set to either true or false.下添加: JAVA_ ...

  10. 网页速度很慢优化方案:如何提高网页加载速度,提升网站加载速度

    网站加载速度的快慢,直接影响用户的去留.这里为大家持续更新我的经验,帮你解决网页速度很慢,慢在哪里,该怎么优化的问题.希望对你有所帮助! 1.  网站空间要好:网站需要一个稳定的服务器或者虚拟机,可以 ...

最新文章

  1. 在vi或vim上查找字符串
  2. Iterator接口和for...of循环
  3. python软件代码示例-用Python写一个模拟qq聊天小程序的代码实例
  4. 转:Hibernate中Criteria和DetachedCriteria的完整用法
  5. Java集合:Hashtable源码分析
  6. 中国工业自动化行业需求现状及投资风险评估报告2022-2027年版
  7. perl 远程 mysql_写的一个perl脚本,用于发送远程MySQL命令
  8. tablefunc 行转列
  9. pytorch入门-简介及安装
  10. 编程范式之rotate操作
  11. 12月 Web 服务器调查:nginx 增长最快,微软市场份额最高
  12. “智慧城市”如火如荼 与“数字城市”又有何差别?
  13. IDEA + Spring boot devtools 热部署 与 多实例启动
  14. pyqt5写一个抽奖程序(再次美化)
  15. linux中孚软件,中孚主机监控与审计系统
  16. Android Studio实现记单词App,背完四六级一次过~
  17. 二级分销系统平台软件开发
  18. 行人三维姿态与形状估计面试准备
  19. 第30届深圳礼品展暨1688工厂直采季开幕,携手创增长
  20. C# 特殊运算符 |,,^的运用

热门文章

  1. iOS开发之App上架流程(2017)
  2. 洛谷 P2879 [USACO07JAN]区间统计Tallest Cow
  3. [NOIP2015] 运输计划(第二弹)
  4. 斐波那契数列的第N项
  5. 团队二阶段冲刺个人工作总结7
  6. 双轴按键摇杆控制器控制TFTLCD(使用ADC1双通道DMA传输)
  7. FragmentSharedFabTransition
  8. Windows Server 2003 SP2 中文版下载
  9. jupyter notebook 修改默认文件夹
  10. Eclipse中启动tomcat: java.lang.OutOfMemoryError: PermGen space的解决方法