Minify优化网站性能 合并多个CSS或者js文件

作者mazerain 文章分类 分类:前端 文章评论 0条评论 阅读次数 已被围观 7364

      今天在看dbRadio Plus时,发现里面有<link href="/FileCombine?Minify=true&FileType=CSS&RootPath=/Content/stylesheets/&File=Gobal.css&File=intro.css"
rel="stylesheet" type="text/css" />一段,想到CSS可以这样写?这无疑是合并了多个css,减少请求次数和时间的一个方法。就开始搜索Minify。

项目地址:minify(Google Code)

作用:合并(减少HTTP请求)、精简、Gzip压缩和缓存JavaScript和CSS文件。

配置:Apache+PHP,开启Mod Rewrite(不开启也可以)。

下载:点击下载

安装:解压后将min文件夹复制到网站根目录。

使用方法:

假设网站域名是http://example.com,Minify安装在了虚拟主机的根目录下,那么访问http://example.com/min/,我们会看到一个“Minify URI Builder”,我们可以输入需要进行合并的文件CSS/JS的URI,如下

点击Update之后,系统会自动生成一个合并后的URL:

/min/b=js&f=jquery-a.js,jquery-b.js,jquery-c.js ←开启Rewrite的URL

/min/?b=js&f=jquery-a.js,jquery-b.js,jquery-c.js ←不开启Rewrite的URL

上传CSS也会生成类似的URL。

 

Minify在资源首次被请求的时候,会对多个文件进行合并,gzip,去除空格,注释等处理,然后会把处理的结果进行缓存,默认情况下是进行文件缓存,缓存的key以minify_开头,修改min/config.php文件,设置/min/config.php文件 ,$min_cachePath 有3个选择。

//$min_cachePath = ‘c:\\WINDOWS\\Temp’;
//$min_cachePath = ‘/tmp’;
//$min_cachePath = preg_replace(‘/^\\d+;/’, ”, session_save_path());

选择第2个,去除// 设置tmp属性777

安装完毕后删除min/builder/index.php 文件。防止其他人登陆!后期如需编辑再次上传!

在Html中使用MINIFY 在(X)HTML文件,不要忘记将&替换为&amp;

 

      一般情况下,网站速度的瓶颈都在前端,而最关键的就是资源的加载速度,但是大多数浏览器都有单个域名并发请求数限制,所以如果一个页面中存在很多的资源,比如CSS和JavaScript文件,那么明显会降低网站的加载速度,比较好处理方式就是把多个文件通过一个请求来访问,这样既不会影响之前的文件维护,又会减少资源的清楚数量,Minify就是为之而生。

      下面两幅图分别是启用Minify之前和启用Minify之后网站请求时间的一个对比,可以看出启用Minify之后,资源的加载时间从250ms减少到了125ms,总共节省了50%的时间。

特性:

口碑网也是用同样的方法。

【上一篇】兰州出差
【下一篇】暗香

发表评论: