91亚洲精华国内精华精华液_国产高清在线精品一区不卡_精品特级一级毛片免费观看_欧美日韩中文制服有码_亚洲精品无码你懂的网站369

Minify 是用PHP5開(kāi)發(fā)的應(yīng)用，通過(guò)遵循一些Yahoo的優(yōu)化規(guī)則來(lái)提高網(wǎng)站的性能。它會(huì)合并多個(gè)CSS或者JavaScript文件，移除一些不必要的空格和 注釋，進(jìn)行g(shù)zip壓縮，并且會(huì)設(shè)置瀏覽器的緩存頭。Minify 在設(shè)計(jì)上和Yahoo的 Combo Handler Service非常像，不過(guò)Minify可以合并任何你想要合并的JavaScript和CSS文件。

一般情況下，網(wǎng)站速度的瓶頸都在前端，而最關(guān)鍵的就是資源的加載速度，但是大多數(shù)瀏覽器都有單個(gè)域名并發(fā)請(qǐng)求數(shù)限制，所以如果一個(gè)頁(yè)面中存在很多的 資源，比如CSS和JavaScript文件，那么明顯會(huì)降低網(wǎng)站的加載速度，比較好處理方式就是把多個(gè)文件通過(guò)一個(gè)請(qǐng)求來(lái)訪問(wèn)，這樣既不會(huì)影響之前的文 件維護(hù)，又會(huì)減少資源的清楚數(shù)量，Minify就是為之而生。下面是一些被Minify采用的 Yahoo！ 優(yōu)化準(zhǔn)則：

1、Make Fewer HTTP Requests

2、Add an Expires or a Cache-Control Header

3、Gzip Components

4、Minify JavaScript and CSS

5、Configure ETags

6、Keep Components under 25K

下面兩幅圖分別是啟用Minify之前和啟用Minify之后網(wǎng)站請(qǐng)求時(shí)間的一個(gè)對(duì)比，可以看出啟用Minify之后，資源的加載時(shí)間從250ms減少到了125ms，總共節(jié)省了50%的時(shí)間。

特性：

合并多個(gè)CSS或JavaScript文件為一個(gè)文件，減少請(qǐng)求數(shù)量，并且進(jìn)行minify處理

使用了多個(gè)開(kāi)源的庫(kù)，包括 JSMin.php ，Minify CSS，Minify HTML

服務(wù)端緩存（fils/APC/Memcache），可以避免不必要的重復(fù)處理

當(dāng)瀏覽器存在資源的緩存，返回HTTP 304 Not Modified

多個(gè)文件合并時(shí)，自動(dòng)生成URI

當(dāng)開(kāi)啟服務(wù)端緩存的時(shí)候，在一般的服務(wù)器上Minify每秒可以處理幾百個(gè)并發(fā)請(qǐng)求

根據(jù)請(qǐng)求頭，開(kāi)啟Content-Encoding： gzip。在服務(wù)端緩存開(kāi)啟的情況下，Minify提供gzipped 文件速度比Apache’s mod_deflate模塊要快

安裝

下載最新的Minify，然后解壓文件到”min” 文件夾

Copy “min” 文件夾到自己網(wǎng)站的DOCUMENT_ROOT下，如果想要Minify在子目錄下工作，看這里

使用

假設(shè)網(wǎng)站域名是http://example.com，Minify安裝在了虛擬主機(jī)的根目錄下，那么訪問(wèn)http://example.com/min/，我們會(huì)看到一個(gè)“Minify URI Builder”，我們可以輸入需要進(jìn)行合并的文件URI，如下

點(diǎn)擊Update之后，系統(tǒng)會(huì)自動(dòng)生成一個(gè)合并后的URI：/min/?b=js&f=jquery-a.js,jquery- b.js,jquery-c.js。如果覺(jué)得URI太長(zhǎng)，可以通過(guò)配置文件來(lái)指定group，編輯min目錄下的groupsConfig.php文件， 加入以下內(nèi)容：

之后就可以通過(guò)/min/?g=js來(lái)訪問(wèn)了

Minify在資源首次被請(qǐng)求的時(shí)候，會(huì)對(duì)多個(gè)文件進(jìn)行合并，gzip，去除空格，注釋等處理，然后會(huì)把處理的結(jié)果進(jìn)行緩存，默認(rèn)情況下是進(jìn)行文件緩存，緩存的key以minify_開(kāi)頭，修改min/config.php文件，配置緩存文件存放的位置：

$min_cachePath = '/tmp';

除了通過(guò)文件進(jìn)行緩存之外，Minify還支持Memcache緩存，修改min/index.php文件，加入以下代碼：

Minify支持兩種debug方式，一種是通過(guò)firephp調(diào)試PHP錯(cuò)誤，修改min/config.php文件，加入以下代碼：

另一種是通過(guò)在URL中加入flag進(jìn)行錯(cuò)誤調(diào)試，在min/config.php中加入

之后就能以http://example.com/min/f=jquery-a.js,jquery-b.js,jquery-c.js&debug=1方式進(jìn)行調(diào)試了

參考：

http://code.google.com/p/minify/wiki/UserGuide

http://www.mrclay.org/2008/09/19/minify-21-on-mrclayorg/

把min目錄上傳根目錄，根目錄打開(kāi)http://example.com/min/

Note: Please set $min_cachePath in /min/config.php to improve performance.

設(shè)置/min/config.php文件 ，$min_cachePath 有3個(gè)選擇。

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

選擇第2個(gè)，去除// .設(shè)置tmp屬性777

在顯示的界面中加入你想合并壓縮的 js/css 路徑，點(diǎn)擊 ‘Update’ 之后會(huì)為你生成一個(gè) url，如：http://localhost/min/b=googletesting/js& f=mootools.js,iAction.js,iAjax.js,global.js

css和JS分別合并，2個(gè)地址。如果需要組合的文件很多，url 就會(huì)變得很長(zhǎng)，Minify 支持 group，可以將這些文件分組，這樣 url 中只需指定 g=group名字 就可以了。

安裝完畢后刪除min/builder/index.php 文件。防止其他人登陸！后期如需編輯再次上傳！

示例：

上面的示例中，將三個(gè)css文件壓縮為一個(gè)css文件，減少了兩個(gè)HTTP請(qǐng)求，性能上確實(shí)能提高不少，特別是對(duì)于訪問(wèn)量大的頁(yè)面。但是之前一直在思索兩個(gè)問(wèn)題：

1.文件名中包含不規(guī)則的字符，在windows操作系統(tǒng)下是不允許作為文件名的。
2.瀏覽器的緩存怎么處理。
通過(guò)一些時(shí)間摸索和 跟同事進(jìn)行探討，迷霧漸漸清晰了。對(duì)于一個(gè)問(wèn)題，服務(wù)器端是進(jìn)行了urlrewrite了，比如上面圖示的url鏈接其實(shí)是障眼法，是給別人看是這么個(gè)東 東（它包含了一些版本和文件名的信息，使用版本號(hào)的一個(gè)好處就是可以在版本升級(jí)的時(shí)候可以及時(shí)更新緩存，保持更行的css文件的及時(shí)生效），其實(shí)是服務(wù)器 端會(huì)將它rewrite到另外一個(gè)文件里。這個(gè)文件是會(huì)自動(dòng)通過(guò)參數(shù)整合三個(gè)css文件到一個(gè)css文件里，最后download到客戶端。那么對(duì)于第二 個(gè)問(wèn)題也就好解釋了，url不變，瀏覽器就會(huì)從緩存里讀取。

問(wèn)題想清楚了，偶也就開(kāi)始思索著自己去怎么實(shí)現(xiàn)這么個(gè)功能，下面是我摸索過(guò)程中所想到的辦法（經(jīng)測(cè)試，都不太理想）：

第一：通過(guò)服務(wù)端的一個(gè)程序文件（這里是PHP的一個(gè)小程序）來(lái)獲取客戶端發(fā)送的幾個(gè)javascript或者CSS的URL信息，之后通 過(guò)PHP腳本將這幾個(gè)文件整合為一個(gè)文件并把整合后的文件發(fā)送到客戶端，在客戶端再通過(guò)responseText把代碼動(dòng)態(tài)生成script或者 style，插入到head中。

<?php
//////////////// test.php file: ////////////////
//file path param
$path=$_GET["jspath"];
//split param
$split=$_GET["split"];
//file path array
$path_arr=split($split,$path);
//store all files text
$js_str="";
//the count of file path array
$count=count($path_arr);
//read each file
for($i=0;$i<$count;$i++){
$file_read=fopen($path_arr[$i],"r");
while(!feof($file_read)){
$line=fgets($file_read);
if(strlen($line) ===1){
$js_str=$js_str.$line."\n";
}else{
$js_str=$js_str.$line;
}
}
fclose($file_read);
}
echo($js_str); // flush all content to client.
?>

///////////////// combine.js file /////////////////
(function(global){
var XHR=function(){
var xhr=false;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
try{
xhr=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xhr;
}
var InsertElement={
"js":function(text){
var script=document.createElement("script");
script.setAttribute("type","text/javascript");
script.text=text;
document.getElementsByTagName("head")[0].appendChild(script);
},
"javascript":this["js"],
"css":function(text){
var style=document.createElement("style");
style.setAttribute("type","text/css");
style.innerHTML=text;
document.getElementsByTagName("head")[0].appendChild(style);
}
}
var combineJS=function(urls,path,type,split,compress){
split = split || ",";
type = type || "js";
var url=path+"?jspath="+urls.join(split)+"&split="+split;
var xhr=XHR();
xhr.open("GET",url,true);
xhr.onreadystatechange=function(){
if(xhr.readyState === 4 && xhr.status === 200){
InsertElement[type](xhr.responseText);
}
}
xhr.send(null);
}
global.combineJS=combineJS;
})(window);
//combine files
combineJS(["test1.js","test2.js","test3.js","http://localhost/sizzle.js"],"combine.php");

上面的方式是通過(guò)動(dòng)態(tài)生成script或者style的方式來(lái)達(dá)到合并文件，減少HTTP請(qǐng)求的目的。但是測(cè)試中發(fā)現(xiàn)一個(gè)問(wèn)題：客戶端請(qǐng)求合并后的 文件會(huì)等待比較長(zhǎng)的時(shí)間，這跟直接鏈入幾個(gè)文件比起來(lái)，消耗的時(shí)間差距比較大。如下圖示顯示的合并后的文件插入到了文檔中，以及一直處于等待狀態(tài)的一個(gè)問(wèn) 題（1s~6s之間)?！稖y(cè)試用例》

第二：合并幾個(gè)文件的方法和上面的一樣，只是我將合并后的文件內(nèi)容返回來(lái)的時(shí)候插入到當(dāng)前發(fā)送請(qǐng)求的script標(biāo)簽內(nèi)，這得益于一個(gè)技 巧：在加載的時(shí)候，當(dāng)前的script元素永遠(yuǎn)是處于scripts.length-1的索引位置。因此可以在js代碼里面進(jìn)行改寫：《測(cè)試用例》

(function(global){
var XHR = function(){
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xhr;
}
// Check DOM whether is rendered.
var DOMReady = function(fn){
fn = typeof fn === "function" ? fn : function(){
};
(function(){
if (document && document.getElementsByTagName && document.getElementById && document.body) {
fn();
}
else {
setTimeout(arguments.callee, 10);
}
})();
}
//Execute the code from server.
var evalJS = function(text){
DOMReady(function(){
eval(text);
});
}
var InsertElement = {
"js": function(text){
var scripts = document.getElementsByTagName("script");
var script = scripts[scripts.length - 1];
script.text += text;
evalJS(text);
},
"javascript": this["js"],
"css": function(text){
var style = document.createElement("style");
style.setAttribute("type", "text/css");
style.innerHTML = text;
document.getElementsByTagName("head")[0].appendChild(style);
}
}
var combineJS = function(urls, path, type, split, compress){
split = split || ",";
type = type || "js";
var url = path + "?jspath=" + urls.join(split) + "&split=" + split;
var xhr = XHR();
xhr.open("GET", url, true);
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
InsertElement[type](xhr.responseText);
}
}
xhr.send(null);
}
global.combineJS = combineJS;
})(window);
combineJS(["test1.js", "test2.js", "test3.js"], "combine.php", "js");

經(jīng)過(guò)測(cè)試，上面的方式跟第一種是一樣的效果，不理想。雖然減少了HTTP的請(qǐng)求數(shù)目，但是增加了服務(wù)器響應(yīng)的等待時(shí)間。

第三：仿照口碑網(wǎng)的實(shí)現(xiàn)方式，通過(guò)在服務(wù)端動(dòng)態(tài)生成一個(gè)合并了幾個(gè)javascript或者CSS的文件，之后把整合后的文件的url返回給客戶端，之后進(jìn)行引用?！稖y(cè)試用例》

<?php
//file path param
$path=$_GET["jspath"];
//$path="/test/test/test1.css,/test/test/test2.css,/test/test/test3.css";
//split param
$split=$_GET["split"];
//$split=",";
//file path array
$path_arr=split($split,$path);
//store all files text
$js_str="";
//the count of file path array
$count=count($path_arr);
//read each file
for($i=0;$i<$count;$i++){
$file_read=fopen("http://www.ilovejs.net/lab/combine/".$path_arr[$i],"r");
while(!feof($file_read)){
$line=fgets($file_read);
if(strlen($line) ===1){
$js_str=$js_str.$line."\n";
}else{
$js_str=$js_str.$line;
}
}
fclose($file_read);
}
//write content to a file.
$write_file=fopen("http://www.ilovejs.net/lab/combine/".$path,"w+");
fwrite($write_file,$js_str);
fclose($write_file);
// response to client.
echo($path);
?>

之后客戶端通過(guò)resonseText獲得這個(gè)url，動(dòng)態(tài)插入一個(gè)script或者link元素到head中。測(cè)試之后，上面的問(wèn)題還是沒(méi)有解決。

總結(jié)下：上面的實(shí)現(xiàn)方式都是存在問(wèn)題的：通過(guò)客戶端發(fā)送urls，服務(wù)端再整合文件，之后發(fā)送url或者內(nèi)容。這已經(jīng)存在了兩個(gè)必須的HTTP請(qǐng)求。這個(gè)就存在許多客觀的因素來(lái)影響這兩個(gè)HTTP請(qǐng)求的反應(yīng)時(shí)間：一個(gè)是網(wǎng)速，一個(gè)是客戶端和服務(wù)端操作系統(tǒng)的性能。

所以，比較合理的做法是通過(guò)參數(shù)，在服務(wù)端直接整合成一個(gè)文件，生成之后客戶端再通過(guò)url鏈入到head中，這中間就需要一個(gè)跟普通通過(guò)script或者link鏈入文件的開(kāi)銷，卻減少了許多個(gè)HTTP請(qǐng)求的開(kāi)銷，這才能起到優(yōu)化的目的。下面是口碑網(wǎng)的最佳實(shí)踐方式：

<jsp:include page=”/CMS/headers/wrap/header.jsp”>
<jsp:param name=”css” value=”<%=STYLE_BASE_4_X_X+”,”+STYLE_HEAD+”,”+STYLE_XXX%>”/>
<jsp:param name=”charset” value=”utf-8″ />
</jsp:include>

通過(guò)上面參數(shù)的設(shè)置，事先在服務(wù)端生成這個(gè)整合的文件，之后頁(yè)面內(nèi)就通過(guò)script或者link來(lái)鏈入這個(gè)文件。