Windows下使用apache模块实现合并多个js、css提高网页加载速度

2024-12-23 22:52:41

现在的网站表现力越来越丰富，页面加载的js和css自然也越来越多。当网站页面上的js和css太多，浏览器打开页面的速度就会很慢，明显降低了用户的体验。使用mod_concatx, 可以合并多个文件在一个http响应报文中，可以有效提高js/css的加载速度。

示例效果如下：

mod_concatx模块是在mod_concat基础上修改的，感谢他们的工作。

原有的mod_concat模块有很大的参考价值，但实际作用不大。

该模块存在以下三个问题：

1、每次都会重新向客户端发数据，没有合理利用浏览器缓存
2、存在安全漏洞，导致服务端程序被下载，比如"/??jquery.js,common.php"
3、合并每个文件时中间没间隔，导致内容粘连在一起，可能引起错误

所以我在mod_concat基础上写了mod_concatx模块，解决了前面提到的一些问题。

下载地址：http://xiazai.jb51.net/201501/other/mod_concatx-140709.rar（内附源码，dll，更新了Apache2.2/2.4 64位版）

Google托管地址：http://code.google.com/p/apmod/

使用方法：

代码如下:

模块配置：

打开apache配置文件httpd.conf

代码如下:

LoadModule concatx_module modules/mod_concatx.dll

高级配置：（以下是默认配置，可以不配置）

代码如下:

<IfModule concatx_module>
ConcatxDisable Off
ConcatxCheckModified On
ConcatxSeparator On
ConcatxMaxSize 1024
ConcatxMaxCount 10
ConcatxFileType js,css
</IfModule>

详细说明：

代码如下:

ConcatxDisable On/Off
//是否使用mod_concatx模块

ConcatxCheckModified On/Off
//检查文件是否改动，建议On

ConcatxSeparator On/Off
//合并文件时是否加换行分隔，建议On

ConcatxMaxSize 数字
//合并文件总大小限制最大值，建议不要太大

ConcatxMaxCount 数字
//合并文件总个数限制最大值，建议不要太大

ConcatxFileType js,css
//合并文件类型限制，如不限制填","

最后语：
建议自己编译这个模块，安全放心

后期改进方向：
todo:考虑加入js,css压缩
todo:考虑支持zend解析后的文件
bug:目录存在默认页加载异常（考虑上层hook处理）

如果加载模块后apahce无法启动，请安装vc10运行库，下载地址
http://www.microsoft.com/en-us/download/details.aspx?id=5555

javascript实现一个网页加载进度loading

loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈","省略号"等等. 网页loading有很多用处,比如页面的加载进度,数据的加载过程等等,数据的加载loading很好做,只需要在加载数据之前(before ajax)显示loading效果,在数据返回之后(ajax completed)结束loading效果,就可以了. 但是页面的加载进
jquery插件NProgress.js制作网页加载进度条

NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情! 你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现.其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见.不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现! NProgress.js应用于复杂网页的细长进度条.由 Google, YouTube, 和 Medium 提供灵感. 安装依赖于 jQuery (1.8版本及以上),添加 np
JavaScript实现网页加载进度条代码超简单

网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行
js 延迟加载改变JS的位置加快网页加载速度

当一个网站有很多js代码要加载,js代码放置的位置在一定程度上将会影像网页的加载速度,为了让我们的网页加载速度更快,本文总结了一下几个注意点: 1.延迟加载js代码复制代码代码如下: <script type="text/javascript" src="" id="my"></script> <script type="text/javascript"> setTimeout(&quo
JavaScript实现当网页加载完成后执行指定函数的方法

本文实例讲述了JavaScript实现当网页加载完成后执行指定函数的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码演示了如何在网页加载完成时调用指定的函数,并且可以通过第二段代码动态添加多个函数同时执行. 我们只需要给window.onload指定一个函数既可以在页面加载完成时自动执行MyCoolInitFunc函数 <script type="text/javascript" > window.onload = MyCoolInitFunc </scri
javascript 改变网页加载的CSS

这个是没有种cookie的,记录给自已. 复制代码代码如下: <link href="001.css" id="cssfile" rel="stylesheet" type="text/css" /> <script> function changeStyle(name){ //alert(name); var css = document.getElementById("c
JS+CSS实现网页加载中的动画效果

本文实例为大家分享了JS实现网页加载中效果的具体代码,供大家参考,具体内容如下需要材料: 一张loading动画的gif图片基本逻辑: 模态框遮罩 + loading.gif动图, 默认隐藏模态框页面开始发送Ajax请求数据时,显示模态框请求完成,隐藏模态框下面我们通过Django新建一个web应用,来简单实践下实践 1.新建一个Django项目,创建应用app01, 配置好路由和static,略.将gif动图放到静态文件夹下,结构如下: 2.视图中定义一个函数,它返回页面test.
Windows下使用apache模块实现合并多个js、css提高网页加载速度

现在的网站表现力越来越丰富,页面加载的js和css自然也越来越多.当网站页面上的js和css太多,浏览器打开页面的速度就会很慢,明显降低了用户的体验.使用mod_concatx, 可以合并多个文件在一个http响应报文中,可以有效提高js/css的加载速度. 示例效果如下: mod_concatx模块是在mod_concat基础上修改的,感谢他们的工作. 原有的mod_concat模块有很大的参考价值,但实际作用不大. 该模块存在以下三个问题: 1.每次都会重新向客户端发数据,没有合理利用浏览器
windows下配置Apache+PHP+MySQL绿色移动版

Apache 下载地址 http://httpd.apache.org/ 我下载的是 Apache HTTP Server (httpd) 2.2.17 点击 download ,选择 httpd-2.2.17-win32-x86-openssl-0.9.8o.msi 当然,你也可以下载源代码 httpd-2.2.17-win32-src.zip,不过需要自己编译. (我们第一次选择安装版,然后配置好,以后就可以在任何地方使用了) PHP 下载地址 http://windows.php.ne
在WIN98下以apache模块方式安装php

在WIN98下以apache模块方式安装php手记 foolboy@chinaren.com ★相关软件: mod_php4-4.0.1-pl2.zip php-4.0.1pl2-Win32.zip 以上软件可以在www.php.net或者www.phpuser.com上下载注意两者的版本一定要一样, (关键是mod_php4.dll与php4ts.dll及Msvcrt.dll版本相同) ★具体步骤: 用winzip分别将两个.zip文件解压
Windows下搭建apache、php、mysql过程分享

在windows下,apache和mysql都有自动化安装的程序,本篇则侧重从apache和php版本选择,php线程安全,apache和mysql安装启动服务,工作环境配置这几个方面来阐述windows下搭建apache+php+mysql过程. Apache下载地址:http://httpd.apache.org/download.cgi php下载地址:http://windows.php.net/download/ mysql下载地址:http://dev.mysql.com/downl
Windows下部署Apache+PHP+MySQL运行环境实战

官方下载地址:MySQL http://www.mysql.com/downloads/mysql/ 找个MSI文件下下来.Apache http://httpd.apache.org/download.cgiPhp http://windows.php.net/download/#php-5.4 首先是MySQL,(这边吐槽一下被Oracle收购的MySQL) 一步一步往下,无需更多的配置然后安装Apache, 也是一步一步往下安装PHP,(我偷懒我自豪, 在PHP下载页面找那个Insta
windows下PHP APACHE MYSQ完整配置

经过最近一段时间狂热的PHP编程,对WINDOWS平台下PHP的配置可算是深有感触,一开始我用的是一键安装的傻瓜包,但是考虑傻瓜包的安装版本已经落后,在真正手动配置PHP环境时遇到许多问题,在查阅了许多资料和尝试后,终于配置成功.现在,我将我的配置经验和大家分享一下,相信可以解决大家配置PHP环境的迷惑. 首先说一下我用的软件版本. PHP 5.1.6 APACHE 2.0.59(注意:APACHE 2.2.X版本以上必须安装插件才支持PHP 5) MYSQL 5.0.24a 好了,现在开始安装
node.js使用require()函数加载模块

详细说明均以写在注释之中,这里就不啰嗦了,小伙伴们自己详细看吧,千万别吧注释当成空气了. 复制代码代码如下: /*在node中,可以使用require()函数来加载模块. * require函数使用一个参数,参数值可以带有完整路径的模块的文件名,也可以为模块名.当使用node中提供的模块时,在require函数中只需要指定模块名即可. * */ //建立一个页面2.js;代码如下 var name="思思博士"; exports.name=name; //建立一个页面1.js;代
Windows下php5+apache+mysql5 手工搭建笔记

这里我就不说那些太概念的东西了(其实我也说不出来,哈哈),但是基本的原理程序员是要知道的,例如网站基本运行原理,php运行需要php的环境,java,DotNet同样需要自己的运行环境,那么php的运行环境就是php的,其实我也不知道怎么说哈,反正就是个runtime,首先,准备几部工作,我们需要: 1.Apache安装包,apache_http_server_source_httpd-2.2.17-win32-src.zip,大家可以直接去官网下载,http://www.apache.org/
Windows下安装Apache 2.2.21图文教程

本文详细介绍了在Windows平台上安装Apache的过程,希望对初次安装Apache的朋友有所帮助. 1. 软件准备我们以Apache2.2.21版本为例 Apache 官方下载地址:httpd-2.2.21-win32-x86-no_ssl.msi 2. 开始安装双击httpd-2.2.21-win32-x86-no_ssl.msi开始安装.出现安装欢迎界面. 图1 欢迎界面直接点"Next"继续,出现授权协议. 图2 授权协议选择"I accept the te
windows下配置apache+php+mysql时出现问题的处理方法

windows: 安装apache,php,mysql 遇到的各种问题: 1. test.php运行不起,发现是httpd.conf中忘加AddType application/x-httpd-php .php了: 2. 设置好配置文件,发现会报一个date函数的关于时区的警告,把php中的date.timezone加上date.timezone = Asia/Shanghai: 3. 老是报Call to undefined function openssl_get_publickey,把ph

Windows下使用apache模块实现合并多个js、css提高网页加载速度

相关推荐

随机推荐