亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

高性能WEB開發(fā) JS、CSS的合并、壓縮、緩存管理

 更新時間:2010年05月14日 00:49:49   作者:  
本篇文章主要討論下目前JS,CSS 合并、壓縮、緩存管理存在的一些問題,然后分享下自己項目中用到的1個處理方案,并提供1個實例下載。
存在的問題:

合并、壓縮文件主要有2方面的問題:
1. 每次發(fā)布的時候需要運行一下自己寫的bat文件或者其他程序把文件按照自己的配置合并和壓縮。
2. 因生產(chǎn)環(huán)境和開發(fā)環(huán)境需要加載的文件不一樣,生產(chǎn)環(huán)境為了需要加載合并、壓縮后的文件,而開發(fā)環(huán)境為了修改、調(diào)試方便,需要加載非合并、壓縮的文件,所以我們常常需要在JSP中類似與下面的判斷代碼:
復(fù)制代碼 代碼如下:

<c:if test="${env=='prod'}">
<script type="text/javascript" src="/js/all.js"></script>
</c:if>
<c:if test="${env=='dev'}">
<script type="text/javascript" src="/js/1.js"></script>
<script type="text/javascript" src="/js/2.js"></script>
<script type="text/javascript" src="/js/3.js"></script>
</c:if>

緩存問題:在現(xiàn)在JS滿天飛的時代,大家都知道緩存能帶來的巨大好處,但緩存確實非常麻煩的一個問題,相信很多人曾經(jīng)歷過下面的情況:為了讓程序更快,在服務(wù)器上為JS加上緩沖5天的代碼,但產(chǎn)品更新后第二天就接到電話說系統(tǒng)出錯,詳細了解后就發(fā)現(xiàn)是緩存引起的,讓用戶刪除緩存后就會OK。原因很簡單,就是你JS已經(jīng)修改了,但用戶還在使用緩存中的老JS。在經(jīng)歷幾次這種情況,被領(lǐng)導(dǎo)數(shù)落了幾次后。沒辦法只能把JS的緩沖去掉,或者改成8個小時??蛇@樣就完全失去了緩存的優(yōu)勢了,哪我們到底需要解決哪些問題才能讓我們使用緩沖順心如意了?
1. 如何在修改了某個JS后,自動把所有引用該JS頁面的代碼中加上1個版本號?

2. 該如何生成版本號,根據(jù)什么來產(chǎn)生這個版本號。

可能有人為了解決上面的緩存問題,寫了個JSP標簽,通過標簽讀取JS、css文件的修改時間來作為版本號,從而來解決上面2個問題。但這種方法有下面幾個缺點:
1. 每次請求都要通過標簽讀取讀取文件的修改時間,速度慢。當(dāng)然你可以把文件的修改時間放到緩存中,這樣也會加到了內(nèi)存使用量。

2. 在HTML靜態(tài)頁面中用不了

3. 如果你們公司是如下的部署發(fā)布方式(我們公司就是這樣),則會失效。每次發(fā)布,不是直接覆蓋之前的WEB目錄,運維的為的發(fā)布方便,要求每次發(fā)布直接給他們1個war包,他們會把之前WEB目錄整個刪除,然后上傳現(xiàn)在的war包,這樣就導(dǎo)致程序運行后,所有文件的最后修改時間都是解壓war的時間。

分享自己項目中的處理方案:

為了解決上面討論過的問題,在下寫了1個如下的組件,組件中根據(jù)我們自己的實際情況使用了文件大小來做為文件的版本號,雖然在文件修改很小(比如把字符a改成b),可能文件大小并沒有變,導(dǎo)致版本號也不會變。

但這種機率還是非常低的。當(dāng)然如果你覺的使用文件修改時間作為版本號適合你,只需要修改一行代碼就行,下面看下這個組件的處理流程(本來想用流程圖表達,最后還是覺的文字來的直白寫):
1. 程序啟動(contextInitialized)

2. 搜索程序目錄下的所有merge.txt文件,根據(jù)merge.txt文件的配置合并文件, merge.txt文件實例如下:
# 文件合并配置文件,多個文件以|隔開,以/開頭的表示從根目錄開始,
# 空格之后的文件名表示合并之后的文件名

# 把1,2,3合并到all文件中
1.js|2.js|3.js all.js

#合并CSS
/css/mian.css|/css/common.css all.css
3. 搜索程序目錄下所有JS,CSS文件(包括合并后的),每個文件都壓縮后生成對應(yīng)的1個新文件。

4. 搜索程序目錄下所有JSP,html文件,把所有JS,css的引用代碼改成壓縮后并加了版本號的引用。

實例:
實例的文件結(jié)構(gòu)如下圖:

看JSP原始代碼(程序運行前):
復(fù)制代碼 代碼如下:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<% boolean isDev = false; // 是否開發(fā)環(huán)境%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<% if(isDev){ %>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/1.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/2.js"></script>
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/1.css" />
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/2.css" />
<% }else{ %>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/all.js"></script>
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/all.css" />
<% } %>
</head>
<body>
<h1 class="c1">Hello World!</h1>
</body>
</html>



程序運行后JSP的代碼:
復(fù)制代碼 代碼如下:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
boolean isDev = false; // 是否開發(fā)環(huán)境
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<% if(isDev){ %>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.4.2-3gmin.js?99375"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/1-3gmin.js?90"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/2-3gmin.js?91"></script>
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/1-3gmin.css?35" />
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/2-3gmin.css?18" />
<% }else{ %>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.4.2-3gmin.js?99375"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/all-3gmin.js?180"></script>
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/all-3gmin.css?53" />
<% } %>
</head>
<body>
<h1 class="c1">Hello World!</h1>
</body>
</html>

加3gmin后綴的文件全部是程序啟動時自動生成的。


實例下載:猛擊此處下載


PS:自己的設(shè)計的處理方案并沒有解決"需要JSP中加判斷代碼的問題",主要是因為還沒有找到什么好的辦法去自動刪除1.js,2.js,3.js的3個引用,而插入1個新的all.js的引用,如果那位同學(xué)對解決這個問題有好的想法,請不吝賜教。
如果有同學(xué)想使用這個組件,建議在測試環(huán)境下運行一次后,把修改后的程序直接上傳到正式服務(wù)器上,然后去掉這個功能,不然在服務(wù)器上每次啟動都調(diào)用這個功能還是需要花費一些時間和資源的
其實一直想使用SVN中的版本號來控制緩存,這個是最嚴謹?shù)囊粋€方法,但也因為做起來太復(fù)雜,所以一直也沒做起來,以后以后有時間可以再研究。

相關(guān)文章

最新評論