合并压缩css和Js的方式

[文章作者：磨延城 转载请注明原文出处： https://mo2g.com/view/74/]

本篇博客从减少浏览器加载外部资源连接数的思考角度着手,要想深入了解其他加快网页显示速度的原理,估计又得花不少时间,这需要把前端跟后端都说解释清楚.有时间我会分开写其他部分的内容.这里为了节省时间,只介绍如何减少网页需要加载的外部资源,加快浏览器的响应速度.

本篇博客从减少浏览器加载外部资源连接数的思考角度着手，要想深入了解其他加快网页显示速度的原理，估计又得花不少时间，这需要把前端跟后端都说解释清楚。有时间我会分开写其他部分的内容。这里为了节省时间，只介绍如何减少网页需要加载的外部资源，加快浏览器的响应速度。

如果一个页面比较复杂，要展示的内容 比较多，就会包含很多外部资源、css样式还有js脚本，比如某个门户网站的的html代码如下：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>XXX最大的门户网站</title>

    <!-- 外部css样式资源 开始-->

    <link type="text/css" rel="stylesheet" href="1.css"/>

    <link type="text/css" rel="stylesheet" href="2.css"/>

    ...

    <link type="text/css" rel="stylesheet" href="n-1.css"/>

    <link type="text/css" rel="stylesheet" href="n.css"/>

    <!-- 外部css样式资源 结束-->

</head>

<body>

<!-- 页面展示图片 开始-->

<img src="1.jpg">

...

<img src="n.jpg">

<!-- 页面展示图片 结束-->

<!-- 外部js脚本资源 开始-->

<script scr="1.js"></script>

...

<script scr="n.js"></script>

<!-- 外部js脚本资源 结束-->

</body>

</html>

这些大型门户网站一个页面需要加载的外部资源总数，经常超过100个。腾讯QQ首页，就加载高达了192个外部资源。相信这个数字是经过腾讯的前端团队尽了最大努力才压缩下来的结果，如果没做过处理，会怎样？

请看下边的表格，分别显示了各个浏览器在同一时间，能向同一域名请求的最大并发连接数。

浏览器 HTTP 1.1 HTTP 1.0
IE 6、7、8 2~6 4~6
Firefox 2~6 6~8
Safari 4 4
Chrome 4~6 4~6

如果浏览器支持8个并发链接，每个外部资源加载时间为400ms，那么160个外部资源连接，理论上就需要8000ms（160 ÷ 8 × 400）的加载时间，大约8秒才能显示完整的页面。但实际的情况更加复杂，最基本的问题就是要加载的外部资源数据包的大小，这一因素直接影响了加载时间，要想保证每个外部资源的加载时间为400ms或者更短的时间，这又牵扯到CDN分布式存储。所以，在资金不足的情况下，我们能做的就是减少外部资源的连接数，还有就是精简和压缩静态数据。

为了解决这一问题，我为mPHP核心框架写了一个PHP函数file_merger，用来合并多个CSS样式文件或者JS脚本文件，并对生成的合成文件进行压缩，从而更进一步的减小外部资源的数据大小。

使用环境如下：

测试环境地址：http://localhost/

测试环境目录结构：

/static/css/，css样式目录存在1.css，2.css两个文件

/static/js/，js脚本目录下存在1.js，2.js

/static/merger/，合成文件保存目录

file_merger函数的使用例子如下：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<?php

include ‘file_merger.php‘;

$CFG[‘debug‘] = 0;//当值为1的时候，不进行合并压缩，按常规调用

$CFG[‘java‘] = 0;//当值为1的时候，使用yuicompressor压缩；0使用PHP正则表达式简单压缩

$arrCss[] = ‘1.css‘;

$arrCss[] = ‘2.css‘;

$arrJs[] = ‘1.js‘;

$arrJs[] = ‘2.js‘;

$css = file_merger($arrCss,‘main.css‘);

$js = file_merger($arrJs,‘main.js‘);

echo $css;

echo $js;

/*

函数执行成功后，会在指定的合成文件保存目录生成main.css，main.js两个文件，并会输出结果如下

<link rel="stylesheet" type="text/css" href="http://localhost/static/merger/main.css?1389454147">

<script type="text/javascript" src="http://localhost/static/merger/main.js?1389454147"></script>

测试代码的时候可以把$CFG[‘debug‘]设置为1;

当为1的时候，不会生成合成文件，同时会得到如下输出结果，方便调试：

<link href="http://localhost/static/css/1.css?1389454824" rel="stylesheet" type="text/css">

<link href="http://localhost/static/css/2.css?1389454824" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://localhost/static/js/1.js?1389454824"></script>

<script type="text/javascript" src="http://localhost/static/js/2.js?1389454824"></script>

*/

file_merger有两种压缩方式，一种是使用雅虎基于java开发的yuicompressor，第二种就是我基于PHP正则表达式编写的压缩规则。优先推荐使用yuicompressor的压缩方式，但如果你的服务器环境不支持java，也可以使用第二种方法。

下边是file_merger函数的实现代码，如果使用过程中有什么问题，可以给我留言。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

<?php

/*

作者:moyancheng

最后更新时间:2013-05-17

最后更新时间:2013-12-13

功能：将多个js或css，合并为一个js或css，并进行压缩

$arrPath:合并文件数组

$out:输出文件

$cache:是否缓存，默认为false,会在文件名后边加上时间戳，如main.js?1389424132

*/

function file_merger($arrFile,$out,$cache=false) {

    global $CFG;

    $url = ‘http://localhost/static/‘;//静态资源url地址，根据自己的情况修改

    $static = ‘/static/‘;//静态资源在服务器上的存储路径，根据自己的情况修改

    $dir = "{$static}merger/";//合成文件在服务器上的存储路径，根据自己的情况修改

    $return = "{$url}merger/{$out}";

    $out = "{$dir}{$out}";//

    $time = $_SERVER[‘REQUEST_TIME‘];

    

    if( substr($arrFile[0],-2) == ‘js‘ ) {

         $type = ‘js‘;

    } elseif( substr($arrFile[0],-3) == ‘css‘ ) {

        $type = ‘css‘;

    }

    

    //当文件不存在,或者调试模式,就执行下边的程序

    if( !is_file($out) || $CFG[‘debug‘]) {

        //调试模式,按常规加载js,css

        if( $CFG[‘debug‘] ) {

            $out = ‘‘;

            foreach($arrFile as $key => $file) {

                if( $type == ‘js‘ ) {

                    $out .= "<script type=\"text/javascript\" src=\"{$url}js/{$file}?{$time}\"></script>\n";

                } elseif( $type == ‘css‘ ) {

                    $out .= "<link href=\"{$url}css/{$file}?{$time}\" rel=\"stylesheet\" type=\"text/css\">\n";

                }

            }

            return $out;

        } else {

        //正式环境启动压缩

            ob_start();

            foreach($arrFile as $key => $file) {

                include $static."{$type}/{$file}";

            }

            $str =  ob_get_clean();

            $tmp = $dir. ‘tmp‘;

            

            if($CFG[‘java‘]) {

                //java程序精简文件

                file_put_contents($tmp,$str);

                if( $type == ‘js‘ ) {

                    $exec = "java -jar {$static}yuicompressor-2.4.2.jar --type js --charset utf-8 -v $tmp > $out";//压缩JS

                } elseif( $type == ‘css‘ ) {

                     $exec = "java -jar {$static}yuicompressor-2.4.2.jar --type css --charset utf-8 -v $tmp > $out";//压缩CSS

                }

                `$exec` ;

            } else {

                //php程序精简文件

                $str = preg_replace( ‘#/\*.+?\*/#s‘,‘‘, $str );//过滤注释 /* */

                $str = preg_replace( ‘#(?<!http:)(?<!\\\\)(?<!\‘)(?<!")//(?<!\‘)(?<!").*\n#‘,‘‘, $str );//过滤注释 //

                $str = preg_replace( ‘#[\n\r\t]+#‘,‘ ‘, $str );//回车 tab替换成空格

                $str = preg_replace( ‘#\s{2,}#‘,‘ ‘, $str );//两个以上空格合并为一个

                file_put_contents($out,$str);

            }

        }

    }

    unset($CFG);

    if( $cache ) {

        if( $type == ‘js‘ ) return "<script type=\"text/javascript\" src=\"{$return}\"></script>\n";

        elseif( $type == ‘css‘ ) return "<link rel=\"stylesheet\" type=\"text/css\" href=\"{$return}\">\n";

    } else {

        if( $type == ‘js‘ ) return "<script type=\"text/javascript\" src=\"{$return}?{$time}\"></script>\n";

        elseif( $type == ‘css‘ ) return "<link rel=\"stylesheet\" type=\"text/css\" href=\"{$return}?{$time}\">\n";

    }

}

[文章作者：磨延城 转载请注明原文出处： https://mo2g.com/view/74/]

本篇博客从减少浏览器加载外部资源连接数的思考角度着手,要想深入了解其他加快网页显示速度的原理,估计又得花不少时间,这需要把前端跟后端都说解释清楚.有时间我会分开写其他部分的内容.这里为了节省时间,只介绍如何减少网页需要加载的外部资源,加快浏览器的响应速度.

本篇博客从减少浏览器加载外部资源连接数的思考角度着手，要想深入了解其他加快网页显示速度的原理，估计又得花不少时间，这需要把前端跟后端都说解释清楚。有时间我会分开写其他部分的内容。这里为了节省时间，只介绍如何减少网页需要加载的外部资源，加快浏览器的响应速度。

如果一个页面比较复杂，要展示的内容 比较多，就会包含很多外部资源、css样式还有js脚本，比如某个门户网站的的html代码如下：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>XXX最大的门户网站</title>

    <!-- 外部css样式资源 开始-->

    <link type="text/css" rel="stylesheet" href="1.css"/>

    <link type="text/css" rel="stylesheet" href="2.css"/>

    ...

    <link type="text/css" rel="stylesheet" href="n-1.css"/>

    <link type="text/css" rel="stylesheet" href="n.css"/>

    <!-- 外部css样式资源 结束-->

</head>

<body>

<!-- 页面展示图片 开始-->

<img src="1.jpg">

...

<img src="n.jpg">

<!-- 页面展示图片 结束-->

<!-- 外部js脚本资源 开始-->

<script scr="1.js"></script>

...

<script scr="n.js"></script>

<!-- 外部js脚本资源 结束-->

</body>

</html>

这些大型门户网站一个页面需要加载的外部资源总数，经常超过100个。腾讯QQ首页，就加载高达了192个外部资源。相信这个数字是经过腾讯的前端团队尽了最大努力才压缩下来的结果，如果没做过处理，会怎样？

请看下边的表格，分别显示了各个浏览器在同一时间，能向同一域名请求的最大并发连接数。

浏览器 HTTP 1.1 HTTP 1.0
IE 6、7、8 2~6 4~6
Firefox 2~6 6~8
Safari 4 4
Chrome 4~6 4~6

如果浏览器支持8个并发链接，每个外部资源加载时间为400ms，那么160个外部资源连接，理论上就需要8000ms（160 ÷ 8 × 400）的加载时间，大约8秒才能显示完整的页面。但实际的情况更加复杂，最基本的问题就是要加载的外部资源数据包的大小，这一因素直接影响了加载时间，要想保证每个外部资源的加载时间为400ms或者更短的时间，这又牵扯到CDN分布式存储。所以，在资金不足的情况下，我们能做的就是减少外部资源的连接数，还有就是精简和压缩静态数据。

为了解决这一问题，我为mPHP核心框架写了一个PHP函数file_merger，用来合并多个CSS样式文件或者JS脚本文件，并对生成的合成文件进行压缩，从而更进一步的减小外部资源的数据大小。

使用环境如下：

测试环境地址：http://localhost/

测试环境目录结构：

/static/css/，css样式目录存在1.css，2.css两个文件

/static/js/，js脚本目录下存在1.js，2.js

/static/merger/，合成文件保存目录

file_merger函数的使用例子如下：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<?php

include ‘file_merger.php‘;

$CFG[‘debug‘] = 0;//当值为1的时候，不进行合并压缩，按常规调用

$CFG[‘java‘] = 0;//当值为1的时候，使用yuicompressor压缩；0使用PHP正则表达式简单压缩

$arrCss[] = ‘1.css‘;

$arrCss[] = ‘2.css‘;

$arrJs[] = ‘1.js‘;

$arrJs[] = ‘2.js‘;

$css = file_merger($arrCss,‘main.css‘);

$js = file_merger($arrJs,‘main.js‘);

echo $css;

echo $js;

/*

函数执行成功后，会在指定的合成文件保存目录生成main.css，main.js两个文件，并会输出结果如下

<link rel="stylesheet" type="text/css" href="http://localhost/static/merger/main.css?1389454147">

<script type="text/javascript" src="http://localhost/static/merger/main.js?1389454147"></script>

测试代码的时候可以把$CFG[‘debug‘]设置为1;

当为1的时候，不会生成合成文件，同时会得到如下输出结果，方便调试：

<link href="http://localhost/static/css/1.css?1389454824" rel="stylesheet" type="text/css">

<link href="http://localhost/static/css/2.css?1389454824" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://localhost/static/js/1.js?1389454824"></script>

<script type="text/javascript" src="http://localhost/static/js/2.js?1389454824"></script>

*/

file_merger有两种压缩方式，一种是使用雅虎基于java开发的yuicompressor，第二种就是我基于PHP正则表达式编写的压缩规则。优先推荐使用yuicompressor的压缩方式，但如果你的服务器环境不支持java，也可以使用第二种方法。

下边是file_merger函数的实现代码，如果使用过程中有什么问题，可以给我留言。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

<?php

/*

作者:moyancheng

最后更新时间:2013-05-17

最后更新时间:2013-12-13

功能：将多个js或css，合并为一个js或css，并进行压缩

$arrPath:合并文件数组

$out:输出文件

$cache:是否缓存，默认为false,会在文件名后边加上时间戳，如main.js?1389424132

*/

function file_merger($arrFile,$out,$cache=false) {

    global $CFG;

    $url = ‘http://localhost/static/‘;//静态资源url地址，根据自己的情况修改

    $static = ‘/static/‘;//静态资源在服务器上的存储路径，根据自己的情况修改

    $dir = "{$static}merger/";//合成文件在服务器上的存储路径，根据自己的情况修改

    $return = "{$url}merger/{$out}";

    $out = "{$dir}{$out}";//

    $time = $_SERVER[‘REQUEST_TIME‘];

    

    if( substr($arrFile[0],-2) == ‘js‘ ) {

         $type = ‘js‘;

    } elseif( substr($arrFile[0],-3) == ‘css‘ ) {

        $type = ‘css‘;

    }

    

    //当文件不存在,或者调试模式,就执行下边的程序

    if( !is_file($out) || $CFG[‘debug‘]) {

        //调试模式,按常规加载js,css

        if( $CFG[‘debug‘] ) {

            $out = ‘‘;

            foreach($arrFile as $key => $file) {

                if( $type == ‘js‘ ) {

                    $out .= "<script type=\"text/javascript\" src=\"{$url}js/{$file}?{$time}\"></script>\n";

                } elseif( $type == ‘css‘ ) {

                    $out .= "<link href=\"{$url}css/{$file}?{$time}\" rel=\"stylesheet\" type=\"text/css\">\n";

                }

            }

            return $out;

        } else {

        //正式环境启动压缩

            ob_start();

            foreach($arrFile as $key => $file) {

                include $static."{$type}/{$file}";

            }

            $str =  ob_get_clean();

            $tmp = $dir. ‘tmp‘;

            

            if($CFG[‘java‘]) {

                //java程序精简文件

                file_put_contents($tmp,$str);

                if( $type == ‘js‘ ) {

                    $exec = "java -jar {$static}yuicompressor-2.4.2.jar --type js --charset utf-8 -v $tmp > $out";//压缩JS

                } elseif( $type == ‘css‘ ) {

                     $exec = "java -jar {$static}yuicompressor-2.4.2.jar --type css --charset utf-8 -v $tmp > $out";//压缩CSS

                }

                `$exec` ;

            } else {

                //php程序精简文件

                $str = preg_replace( ‘#/\*.+?\*/#s‘,‘‘, $str );//过滤注释 /* */

                $str = preg_replace( ‘#(?<!http:)(?<!\\\\)(?<!\‘)(?<!")//(?<!\‘)(?<!").*\n#‘,‘‘, $str );//过滤注释 //

                $str = preg_replace( ‘#[\n\r\t]+#‘,‘ ‘, $str );//回车 tab替换成空格

                $str = preg_replace( ‘#\s{2,}#‘,‘ ‘, $str );//两个以上空格合并为一个

                file_put_contents($out,$str);

            }

        }

    }

    unset($CFG);

    if( $cache ) {

        if( $type == ‘js‘ ) return "<script type=\"text/javascript\" src=\"{$return}\"></script>\n";

        elseif( $type == ‘css‘ ) return "<link rel=\"stylesheet\" type=\"text/css\" href=\"{$return}\">\n";

    } else {

        if( $type == ‘js‘ ) return "<script type=\"text/javascript\" src=\"{$return}?{$time}\"></script>\n";

        elseif( $type == ‘css‘ ) return "<link rel=\"stylesheet\" type=\"text/css\" href=\"{$return}?{$time}\">\n";

    }

}

原文地址：https://www.cnblogs.com/doubilaile/p/8432684.html

时间： 2024-10-18 03:18:37

合并压缩css和Js的方式的相关文章

grunt——合并压缩css和js

npm文档:www.npmjs.com [GruntFile.js] module.exports = function(grunt) { grunt.initConfig({ timestamp:'<%= grunt.template.today("yyyymmddHHMM") %>', jspath:'app/js/', csspath:'app/css/', concat: { js:{ options: { separator: ';' }, src: [ &quo

使用Ant和YUICompressor链接合并压缩你的JS和CSS代码

JS代码和CSS代码在上线前要压缩大家应该都是知道的了.记得之前做项目的时候,最后要交差的时候是找了个网站,将JS代码的文件一个一个地复制,粘贴,复制,粘贴. 当时就在想:TMD有没有好一点的方法,劳资不想老是用Ctrl大法.啊啊啊啊啊啊啊啊阿~.最最坑爹的是,有时候将代码复制粘贴的时候手一抖可能就删了点什么东西,手一快又保存了,反正各种坑爹.坑到没朋友. 但是呢,不压缩也不是是吧? 在写JS代码渐渐多了起来的时候就发现手动压缩根本不是长远的方法.而且JS的代码也开始分块,分功能,分文件写了,尽

在项目生成时就合并压缩你的js

对网站优化来讲,合并压缩js.css等静态内容是必修课之一,一则可以节省宽带:二则可以减少http请求:三则加快了网站的访问速度 对于如何实现合并压缩js 方案一: 继承IHttpModule ,对http进行拦截,然后获取其<script src=*> tag,将js文件取出来合并成为一个资源文件 方案二:如果你用的web解决方案为 asp.net mvc 4,那么当然可以用Bundle技术. 方案三:不依赖任何服务器技术,本地先合并压缩好后再上传 本文着重讲解方案三 要合并文件,可以用do

maven 关于构建版本号，以及在构建的时候压缩css，js并为这些文件追加版本号

最近负责公司一个项目框架的搭建,由于我们这边是后端团队,没有专业的前端工程师支持我们,我就在这个搭建过程中遇到了一些前端问题,给大家分享一下. 主要分享点: 构建项目时自动在css,js文件名中加入版本号     解决新上线版本时,浏览器可以更新缓存 构建项目自动压缩css,js资源文件     加快响应速度 解决第一个问题,是在构建的时候必须生成一个构建版本号,比如构建时刻的timestamp,正好在网上看到这样的插件,配置信息如下 <plugin> <groupId>org.c

vs合并压缩css,js插件——Bundler &amp; Minifier

之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs集成的插件,貌似没有很好的支持,自己在vs里找了一个非常满意的插件——Bundler & Minifier 这个vs插件下载地址:点我 插件功能说明: 1.合并多个css,js,html文件为一个单独的文件 2.保存源文件自动重新组合. 3.压缩css,js,html文件 等等...(其他我没用到,

【转载】Yui.Compressor高性能ASP.NET开发：自动压缩CSS、JS

在开发中编写的js.css发布的时候,往往需要进行压缩,以减少文件大小,减轻服务器的负担.这就得每次发版本的时候,对js.js进行压缩,然后再发布.有没有什么办法,让代码到了服务器上边,它自己进行压缩呢? 有两种办法: 第一种,在css.js请求到来的时候读取一下相对应的文件,进行压缩后返回.此方法可以通过在Global.asax的Application_BeginRequest的事件中,进行处理,也可以在web.config中注册一个httpHandler进行处理. 第二种是在程序启动的时候,

nodejs压缩css及js工具

1. 安装nodejs 2. 安装cssmin. npm install cssmin -g 3. 安装yuicompressor.npm install yuicompressor -g 4. 设置NODE_PATH到全局C:\Users\Administrator\AppData\Roaming\npm\node_modules (默认nodejs全局目录) 5. 创建source目录,创建dist目录 6. 创建compress.js var fs = require('fs'); var

grunt打包压缩css、js方法

1.安装nodejs,如已安装请忽略 2.安装grunt,npm install grunt 3.配置package.json和gruntfile.js文件,详解请见 想合并整个文件夹的文件请安装grunt-contrib-concat, 想压缩某个文件请安装grunt-contrib-cssmin http://learningtogrow.blog.51cto.com/3076238/1909487 http://learningtogrow.blog.51cto.com/3076238/1

使用gulp自动化打包合并前端静态资源（CSS、JS文件压缩、添加版本号）

现在正在做的项目更新迭代比较频繁,会经常对前端代码打包部署,手动整合代码文件很麻烦并且浪费时间,所以决定使用gulp来代替手工完成这项工作. 前端静态资源在发版更新时会面临客户端浏览器缓存的问题(可参考这篇文章),解决这个问题可以采用两类方法:覆盖方法(引用资源时加版本号,不修改资源文件名).非覆盖方法(修改资源文件名),本篇文章主要采用的是第一种加版本号的方式,主要用gulp给静态资源自动加版本号和压缩CSS.JS. 原理:通过对JS,CSS文件内容进行Hash运算,生成一个文件的唯一Hash