用PHP在服务端合并多个JS和CSS文件减少HTTP请求,提高速度

HTML:

 代码如下 复制代码
<link rel="stylesheet" type="text/css" href="cssmin.php?get=base,style1,style2,global&path=css/&v=20131023" />
<script type="text/javascript" src="jsmin.php?get=jquery-1.6.4.min.js,minjquery.js,minjquery.ui.js,test.js,global.js&path=js/&v=20131023"></script>

PHP:

 代码如下 复制代码
//输出JS
header ("Content-type:Application/x-javascript; Charset: utf-8");
if(isset($_GET)) {
    $files = explode(",", $_GET['get']);
    $str = '';
    foreach ($files as $key => $val){
        $str .= file_get_contents($_GET['path'].$val);
    }

    $str = str_replace("t", "", $str); //清除空格
    $str = str_replace("rn", "", $str);
    $str = str_replace("n", "", $str);

    // 删除单行注释
    $str = preg_replace("///s*[a-zA-Z0-9_x7f-xff][a-zA-Z0-9_x7f-xff]*/", "", $str);
    // 删除多行注释
    $str = preg_replace("//*[^/]**//s", "", $str);

    echo $str;
}

//输出CSS
header ("content-type:text/css; charset: utf-8");
if(isset($_GET)) {
    $files = explode(",", $_GET['get']);
    $fc = '';
    foreach ($files as $key => $val){
        $fc .= file_get_contents($_GET['path'].$val.".css");
    }
    $fc = str_replace("t", "", $fc); //清除空格
    $fc = str_replace("rn", "", $fc);
    $fc = str_replace("n", "", $fc);
    $fc = preg_replace("//*[^/]**//s", "", $fc);
    echo $fc;
}

只是个简单原型,没有封装。另外,合并后的文件记得配合缓存。

附上一个相关的开源项目:
http://code.google.com/p/minify/

 

时间: 2024-10-26 18:02:02

用PHP在服务端合并多个JS和CSS文件减少HTTP请求,提高速度的相关文章

服务端合并和压缩JS和CSS文件

Web性能优化最佳实践中最重要的一条是减少HTTP请求,它也是YSlow中比重最大的一条规则.减少HTTP请求的方案主要有合并JavaScript和CSS文件.CSS Sprites.图像映射(Image Map)和使用Data URI来编码图片.CSS Sprites和图像映射现在已经随处可见了,但由于IE6和IE7不支持Data URI以及性能问题,这项技术尚未大量使用.目前大部分网页中的JavaScript和CSS文件数量和开发时一致,少量的网页会根据实际情况采取本地合并,这些合并中相当多

在服务端合并和压缩JavaScript和CSS文件

CSS Sprites和图像映射现在已经随处可见了,但由于IE6和IE7不支持Data URI以及性能问题,这项技术尚未大量使用.目前大部分网页中的JavaScript和CSS文件数量和开发时一致,少量的网页会根据实际情况采取本地合并,这些合并中相当多的是有选择地手动完成,每次新的合并都需要重新在本地完成并上传到服务器,比较的随意和繁琐,同样文件的压缩也有类似的情况.而利用服务端的合并和压缩,我们就可以按照开发的逻辑尽可能让文件的颗粒度变小,利用网页中URL的规则来自动实现文件的合并和压缩,这会

Web移动端使用localStorage缓存Js和css文件

将jquery和公共样式缓存到localStorage,可以减少Http请求,从而优化页面加载时间,下面的代码可以实现此功能: <script type="text/javascript"> //入口函数 if (window.localStorage) { initJs(); initCss("css", "/gfdzp201508257998/Turntable/Style/css_whir.css"); } else { add

客户端访问服务端时,通过ELB;ELB主动关闭第一次请求的源端口,导致后端反馈信息没法通信?

问题描述 客户端访问服务端时,通过ELB:ELB主动关闭第一次请求的源端口,导致后端反馈信息没法通信?

客户端获取服务端纯数据,我所知的有2种方案,1是javascript读取web service,2是专门用一个iframe来请求服务端页面从而获取数据 。请大家说下哪种速度最快,或者有没有更好的方案

问题描述 客户端获取服务端纯数据,我所知的有2种方案,1是javascript读取webservice,2是专门用一个iframe来请求服务端页面从而获取数据.请大家说下哪种速度最快,或者有没有更好的方案 解决方案 解决方案二:up解决方案三:客户端获取服务端纯数据ajax请求页面返回json格式也算纯数据的解决方案四:httprequest

移动端使用localStorage缓存Js和css文的方法(web开发)_javascript技巧

将jquery和公共样式缓存到localStorage,可以减少Http请求,从而优化页面加载时间,下面的代码可以实现此功能: <script type="text/javascript"> //入口函数 if (window.localStorage) { initJs(); initCss("css", "/gfdzp201508257998/Turntable/Style/css_whir.css"); } else { add

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

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

使用grunt合并压缩js、css文件

需要了解的知识: 1.nodejs的安装与命令行使用 2.nodejs安装应用 3.grunt的初步了解 本文已假定读者已经熟悉以上知识.   好,我们继续: 任务1:将src目录下的所有zepto及插件合并,并压缩. --src/ ajax.js assets.js callbacks.js data.js deferred.js detect.js event.js form.js fx.js fx_methods.js gesture.js ie.js ios3.js selector.j

多个js与css文件的合并方法详细说明_javascript技巧

在Web项目的开发中,js,css文件会随着项目的开发变得越来越多,越来越大,这就给给性能方面带来一些问题,如,页面引入的的js,css越多的话,那么对就增加了http请求数,解决该问题的一个好的方法就是合并js,css文件. 下面就简单介绍一个方法,十分简单.下面介绍以合并js文件为例 (1) G.js文件 复制代码 代码如下: ~function(){ window.G={}; G.Method={ add:function(){ alert(111);} ,sub:function(){