自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

高性能WEB開發(fā)之JS、CSS的合并壓縮

作者：BearRui
開發(fā) 前端
本篇文章主要討論下目前JS,CSS 合并、壓縮、緩存管理存在的一些問(wèn)題，然后分享下自己項(xiàng)目中用到的1個(gè)處理方案，并提供1個(gè)實(shí)例下載。

存在的問(wèn)題：

合并、壓縮文件主要有2方面的問(wèn)題：

1. 每次發(fā)布的時(shí)候需要運(yùn)行一下自己寫的bat文件或者其他程序把文件按照自己的配置合并和壓縮。

2. 因生產(chǎn)環(huán)境和開發(fā)環(huán)境需要加載的文件不一樣，生產(chǎn)環(huán)境為了需要加載合并、壓縮后的文件，而開發(fā)環(huán)境為了修改、調(diào)試方便，需要加載非合并、壓縮的文件，所以我們常常需要在JSP中類似與下面的判斷代碼：

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

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

1. 如何在修改了某個(gè)JS后，自動(dòng)把所有引用該JS頁(yè)面的代碼中加上1個(gè)版本號(hào)?

2. 該如何生成版本號(hào)，根據(jù)什么來(lái)產(chǎn)生這個(gè)版本號(hào)。

可能有人為了解決上面的緩存問(wèn)題，寫了個(gè)JSP標(biāo)簽，通過(guò)標(biāo)簽讀取JS、css文件的修改時(shí)間來(lái)作為版本號(hào)，從而來(lái)解決上面2個(gè)問(wèn)題。但這種方法有下面幾個(gè)缺點(diǎn)：

1. 每次請(qǐng)求都要通過(guò)標(biāo)簽讀取讀取文件的修改時(shí)間，速度慢。當(dāng)然你可以把文件的修改時(shí)間放到緩存中，這樣也會(huì)加到了內(nèi)存使用量。

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

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

分享自己項(xiàng)目中的處理方案：

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

但這種機(jī)率還是非常低的。當(dāng)然如果你覺的使用文件修改時(shí)間作為版本號(hào)適合你，只需要修改一行代碼就行，下面看下這個(gè)組件的處理流程(本來(lái)想用流程圖表達(dá)，***還是覺的文字來(lái)的直白寫)：

1. 程序啟動(dòng)(contextInitialized)

2. 搜索程序目錄下的所有merge.txt文件，根據(jù)merge.txt文件的配置合并文件, merge.txt文件實(shí)例如下：

# 文件合并配置文件,多個(gè)文件以|隔開，以/開頭的表示從根目錄開始,

# 空格之后的文件名表示合并之后的文件名

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

1.js|2.js|3.js all.js

#合并CSS

/css/mian.css|/css/common.css all.css

3. 搜索程序目錄下所有JS，CSS文件(包括合并后的)，每個(gè)文件都?jí)嚎s后生成對(duì)應(yīng)的1個(gè)新文件。

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

實(shí)例：

 

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

JS、CSS的合并、壓縮、緩存管理

看JSP原始代碼(程序運(yùn)行前)：

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

程序運(yùn)行后JSP的代碼：

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

加3gmin后綴的文件全部是程序啟動(dòng)時(shí)自動(dòng)生成的。

實(shí)例下載：猛擊此處下載

系列文章：

高性能WEB開發(fā)之減少請(qǐng)求、響應(yīng)的數(shù)據(jù)量

高性能WEB開發(fā)之如何減少請(qǐng)求數(shù)

高性能WEB開發(fā)之如何加載JavaScript

高性能WEB開發(fā)之圖片篇

高性能WEB開發(fā)之Web性能測(cè)試工具推薦

高性能WEB開發(fā)之HTTP服務(wù)器

責(zé)任編輯：陳貽新 來(lái)源： BearRui的博客
CSSjavascript
相關(guān)推薦

2011-04-27 10:57:29

高性能web開發(fā)

2011-04-18 10:16:30

WEB高性能

2011-04-07 13:53:25

Web工具

2011-04-19 11:06:03

JavaScriptweb

2011-10-18 13:58:32

高性能web

2011-04-07 13:39:24

WebHTTP

2011-04-21 09:59:48

WEBjavascript

2013-09-10 16:16:19

移動(dòng)網(wǎng)站性能優(yōu)化移動(dòng)web

2011-06-14 09:27:43

高性能WEB開發(fā)

2011-04-21 10:47:29

Webjavascript

2011-04-28 09:40:26

flush高性能Web開發(fā)

2011-04-25 10:11:57

高性能web開發(fā)

2016-08-23 14:37:21

2009-07-30 10:28:56

Web高性能開發(fā)

2016-11-28 09:19:27

2013-06-19 09:20:53

Web開發(fā)Web性能優(yōu)化高性能

2013-08-16 14:43:14

高性能移動(dòng)Web移動(dòng)Web站點(diǎn)移動(dòng)Web

2013-09-10 17:13:57

移動(dòng)網(wǎng)站性能優(yōu)化移動(dòng)web

2014-03-19 14:34:06

JQuery高性能

2019-03-14 15:38:19

ReactJavascript前端
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)