使用Minify来优化网站性能
Minify 是用PHP5开发的应用,通过遵循一些Yahoo的优化规则来提高网站的性能。它会合并多个CSS或者JavaScript文件,移除一些不必要的空格和注释,进行gzip压缩,并且会设置浏览器的缓存头。Minify 在设计上和Yahoo的 Combo Handler Service非常像,不过Minify可以合并任何你想要合并的JavaScript和CSS文件。
一般情况下,网站速度的瓶颈都在前端,而最关键的就是资源的加载速度,但是大多数浏览器都有单个域名并发请求数限制,所以如果一个页面中存在很多的资源,比如CSS和JavaScript文件,那么明显会降低网站的加载速度,比较好处理方式就是把多个文件通过一个请求来访问,这样既不会影响之前的文件维护,又会减少资源的清楚数量,Minify就是为之而生。下面是一些被Minify采用的 Yahoo!优化准则:
2、Add an Expires or a Cache-Control Header
下面两幅图分别是启用Minify之前和启用Minify之后网站请求时间的一个对比,可以看出启用Minify之后,资源的加载时间从250ms减少到了125ms,总共节省了50%的时间。
特性:
合并多个CSS或JavaScript文件为一个文件,减少请求数量,并且进行minify处理
使用了多个开源的库,包括 JSMin.php ,Minify CSS,Minify HTML
服务端缓存(fils/APC/Memcache),可以避免不必要的重复处理
当浏览器存在资源的缓存,返回HTTP 304 Not Modified
多个文件合并时,自动生成URI
当开启服务端缓存的时候,在一般的服务器上Minify每秒可以处理几百个并发请求
根据请求头,开启Content-Encoding: gzip。在服务端缓存开启的情况下,Minify提供gzipped 文件速度比Apache’s mod_deflate模块要快
安装
下载最新的Minify,然后解压文件到”min” 文件夹
Copy “min” 文件夹到自己网站的DOCUMENT_ROOT下,如果想要Minify在子目录下工作,看这里
使用
假设网站域名是http://example.com,Minify安装在了虚拟主机的根目录下,那么访问http://example.com/min/,我们会看到一个“Minify URI Builder”,我们可以输入需要进行合并的文件URI,如下
点击Update之后,系统会自动生成一个合并后的URI:/min/?b=js&f=jquery-a.js,jquery-b.js,jquery-c.js。如果觉得URI太长,可以通过配置文件来指定group,编辑min目录下的groupsConfig.php文件,加入以下内容:
return array(
'js' => array('//js/jquery-a.js', '//js/jquery-b.js', '//js/jquery-c.js'),//相对于DOCUMENT_ROOT
);
之后就可以通过/min/?g=js来访问了
Minify在资源首次被请求的时候,会对多个文件进行合并,gzip,去除空格,注释等处理,然后会把处理的结果进行缓存,默认情况下是进行文件缓存,缓存的key以minify_开头,修改min/config.php文件,配置缓存文件存放的位置:
$min_cachePath = '/tmp';
除了通过文件进行缓存之外,Minify还支持Memcache缓存,修改min/index.php文件,加入以下代码:
require 'lib/Minify/Cache/Memcache.php';
$memcache = new Memcache;
$memcache->connect('localhost', 11211);
$min_cachePath = new Minify_Cache_Memcache($memcache);
Minify支持两种debug方式,一种是通过firephp调试PHP错误,修改min/config.php文件,加入以下代码:
$min_errorLogger = true;
另一种是通过在URL中加入flag进行错误调试,在min/config.php中加入
$min_allowDebugFlag = true;
之后就能以http://example.com/min/f=jquery-a.js,jquery-b.js,jquery-c.js&debug=1方式进行调试了
参考:
http://code.google.com/p/minify/wiki/UserGuide
http://www.mrclay.org/2008/09/19/minify-21-on-mrclayorg/
文章来源:http://weizhifeng.net/2011/04/30/performance-optimization-using-minify/
使用Minify来优化网站性能的更多相关文章
- NTOPNG,用来平时优化网站性能,用处大的
最近考察一下NTOPNG和NGX-REQ模块,看哪个对网站优化性能用户更大... 参考URL: http://www.68idc.cn/help/jiabenmake/qita/20150109164 ...
- 前端性能优化&&网站性能优化
加载优化:1.合并css.JavaScript 2.合并小图片,使用精灵图 3.缓存一切可缓存的资源 4.使用长cache 5.使用外联式引用css.JavaScript 6.压缩HTML.CSS.J ...
- 不修改代码就能优化ASP.NET网站性能的一些方法
阅读目录 开始 配置OutputCache 启用内容过期 解决资源文件升级问题 启用压缩 删除无用的HttpModule 其它优化选项 本文将介绍一些方法用于优化ASP.NET网站性能,这些方法都是不 ...
- 基于Yahoo网站性能优化的34条军规及自己的见解
1.尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容,这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数,这是提高网页速 ...
- asp.net网站性能优化2则
摘要:Web服务器的性能优化有很多资料介绍了,多台主机负载均衡,查询结果的多级缓 存,数据库索引优化等都是常见的优化手段.随着后端优化空间越来越小,现在越来越多 的网站更注重前端性能的优化,就是浏览器 ...
- 网站性能优化— WebP 全方位介绍
谈到优化网站性能时,主要目标之一就是减少要发送到浏览器的数据量(即 payload).而当前,图片通常是页面构成中最耗费流量的部分,因此降低图片的大小是一个最为有效的优化网页前端性能的办法. 有很多工 ...
- Yahoo网站性能优化的34条军规
1.尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容,这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数,这是提高网页速 ...
- 网站性能优化小结和spring整合redis
现在越来越多的地方需要非关系型数据库了,最近网站优化,当然从页面到服务器做了相应的优化后,通过在线网站测试工具与之前没优化对比,发现有显著提升. 服务器优化目前主要优化tomcat,在tomcat目录 ...
- 不修改代码就能优化ASP.NET网站性能的一些方法 [转]
不修改代码就能优化ASP.NET网站性能的一些方法 阅读目录 开始 配置OutputCache 启用内容过期 解决资源文件升级问题 启用压缩 删除无用的HttpModule 其它优化选项 本文将介绍一 ...
随机推荐
- Jenkins 2.x版本的安装步骤(Windows)
一.登录官网https://jenkins.io/index.html 二.选择LTS版本(长期支持的版本) 如果想要下载其它版本可以进入列表选择,在最顶部有操作系统可以选择 三.安装好后,第一次会进 ...
- tomcat部署web应用的4种方法
在Tomcat中有四种部署Web应用的方式,简要的概括分别是: (1)利用Tomcat自动部署 (2)利用控制台进行部署 (3)增加自定义的Web部署文件(%Tomcat_Home%\conf\Cat ...
- [NOIP2012] 普及组
寻宝 大模拟 #include<iostream> #include<cmath> #include<algorithm> using namespace std; ...
- STL之vector
参考资料: 1.codeproject 2.csdn 3.cplusplus
- 《JavaScript权威指南》学习笔记 第七天 DOM操作
由衷的觉得,随着IT技术的广泛的运用,个人电脑以及智能手机的使用,信息的获取与传播更为简单.但是我们获取有用信息的难度相反是越来越大了,想要保持住自己的注意力越来越难了.除了吃饭睡觉,我的精力都在电脑 ...
- Nginx系列4之基础配置
preface 公司跑得大多数是LNMP平台,所以借此机会多多了解下Nginx.下面主要说说Nginx下面几点: 防盗链 日志切割 负载均衡 虚拟主机 location匹配解释 substatus状态 ...
- 中缀表达式转后缀表达式(用于求字符串表达式值)(js栈和队列的实现是通过数组的push和unshift方法插值,pop方法取值)
中缀表达式:就是我通常用的算术或逻辑公式: 后缀表达式:不包含括号,运算符放在两个运算对象后面,所有的计算按运算符出现的顺序,严格从左向右进行,不用考虑运算符优先级: 如,(2+1)*3 转换后,2 ...
- this.name=name;和this.setName(name);的区别
其实一般属性设置为private后,才会写属性的set和get方法 在本类中可以用 this.name=name 但是,在其他类中药给name赋值,就只能用set了
- HTML学习笔记——head、body及简单标签
1> title标签.网站关键词.网站描述.实现百度网的跳转 2> 单标签.对标签.p标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- ecshop后台【订单管理】
1.订单列表页,在‘确认’,‘无效’,’取消‘....增加一个选项’导出exl表格‘ a.增加html代码,order_list.htm <input name="print" ...