網站靜態化（如何應用Web頁面靜態化技術以提高Web應用系統的響應性能）|快速备案

軟件項目實訓及課程設計指導——如何應用Web頁面靜態化技術提高Web應用系統的響應性能1、什麼是Web頁面靜態化技術（1）Web頁面靜態化技術將JSP動態頁面按照某種模板格式生成對應的*.html純靜態Web頁面的過程，稱之為Web頁面靜態化技術。（2）何種場合需要應用Web頁面靜態化技術當有些企業應用系統中的頁面信息在一段時間內不發生變化時（比如內容管理系統、網上商城中的商品信息等），可以應用Web頁面靜態化技術，這樣可以提高整個系統的響應效率——因為無須再訪問後臺數據庫系統、也不需要再次編譯處理JSP動態頁面文件，因此能夠減少對Web應用系統的消耗和性能影響。2、為什麼要應用Web頁面靜態化技術目前基於B/S（Browser/Server，瀏覽器/服務器模式）體系架構的企業應用系統基本上都是由動態Web頁面所構成的（比如由*.jsp、*.aspx、*.php等類型），正因為是動態化的Web頁面才能滿足不同的Web瀏覽者的個性化的訪問需要、並且能夠與訪問者產生相互交互。但為瞭能夠產生出動態的應用效果，用戶每一次對目標頁面的HTTP請求都會在WEB服務器端對這些動態Web頁面進行編譯或者動態處理，而這些操作都是很消耗Web服務器系統資源的。如果目標頁面文件（比如*.jsp）在一定的時間內，其動態顯示的內容不會發生改變（比如新聞系統中的新聞信息顯示、網點中的商品分類和某一商品信息的詳情頁等），那麼就沒有必要為每一次對它的HTTP請求訪問，都進行一次"新"的編譯或執行。此時可以在用戶第一次對它訪問後，就把它在這段沒有發生改變的時間內的頁面處理結果保存到一個純靜態的頁面文件（*.html格式）或者有靜態效果的其它格式頁面文件（*.vm、*.ftl等形式）中，然後用戶以後每次再訪問這個動態Web頁面時，後臺Web服務器系統程序就直接采用轉換後的靜態頁面內容進行響應。因此，經過靜態化技術轉換處理後的結果Web頁面能夠快速地響應用戶的HTTP請求，而且還能夠大大地減少對Web服務器系統資源的消耗。當然，為瞭能夠達到靜態化的功能實現目標，軟件應用系統的開發人員可以在Web應用系統的開發中應用各種模板技術——比如Velocity模板、FreeMarker模板技術等。當然，讀者如果熟悉Web頁面靜態化技術的實現原理後，也可以自己編程實現。在Web應用系統的表示層開發中如何通過應用Velocity模板技術以提高Web應用系統的響應性能，作者在以前的文章中的做瞭詳細的介紹，有興趣的讀者可以翻看文章《軟件項目實訓及課程設計指導——如何在Web應用系統表示層開發實現中應用Velocity模板技術》。作者在下文將為讀者介紹如何在Web應用系統的表示層開發中應用FreeMarker模板技術以提高Web應用系統的響應性能。3、在Web應用系統的表示層開發中應用FreeMarker模板技術（1）FreeMarker模板是什麼、怎麼理解"模板引擎"的概念FreeMarker 和Velocity都屬於"模板引擎"（作者註："模板引擎"在J2EE平臺中一般為框架形式的系統程序和相關的系統庫），開發人員應用這些模板引擎所提供的模板語言處理相關的數據，模板引擎系統會按照開發人員的要求輸出文本，這些文本的格式可以是HTML網頁、電子郵件、配置文件以及源代碼等形式。如下代碼示例為在標準的HTML頁面中內嵌FreeMarker模板語言的語句（參看其中的黑體標識的語句）的示例。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head> <title>showInfoTemplate.ftl</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head> <body>
<h2>采用標準的方式獲得參數值： ${showResultInfo}</h2 > <br>
<h2>采用FreeMarker模板的內建變量的方式獲得參數值： ${Request.showResultInfo }</h2 > <br>
</body></html>（2）為什麼要應用FreeMarker等類型的模板技術談到"模板"的概念，相信讀者應該不會感覺到陌生感，在生活中大量地應用各種各樣的"模板"，應用的目的讀者也應該都會理解。同樣，在計算機軟件應用系統中也大量地提高各種模板和應用各種模板來簡化和加速某項"工作"，比如Word中的文檔格式模板、編程語言中的print("%各種格式符")語句中的替換模板等等。而在J2EE系統平臺的應用系統開發中之所以應用FreeMarker模板技術：首先，FreeMarker模板技術同樣也能夠實現Web應用系統中的表示邏輯和數據處理邏輯相互分離——這是通過在模板文件中包裝HTML標簽實現的。FreeMarker模板采用標準的Web Servlet程序中所提供的模型數據動態地生成目標HTML頁面文件。在Web應用系統開發中如果應用FreeMarker模板技術，界面開發人員隻需要關註於界面（也就是FreeMarker的模板文件）的開發，而系統中的業務邏輯的開發人員也隻需要負責將需要顯示的數據填入到FreeMarker的模板文件的數據模型中。最終由FreeMarker模板引擎負責合並數據模型和模板文件，然後產生出完整的Web頁面文件並輸出到Web瀏覽器中。其次，實現將基於動態化技術的各種Web頁面（如*.jsp、*.aspx、*.php等）轉換為靜態的HTML格式或其它文本格式的Web頁面，達到"動態頁面靜態化"的高效響應的應用效果。因此，模板引擎不隻是可以讓開發人員實現代碼級別的分離（如系統中的業務邏輯代碼和用戶界面展示控制代碼的分離），也可以實現軟件應用系統中的數據分離（如動態可變數據與靜態固定數據相互分離），甚至還可以實現應用系統中的代碼單元共享（代碼重用）等效果。4、Struts及Struts2應用框架都全面地支持FreeMarker模板技術（1）FreeMarker模板特別適應於基於MVC體系架構模式的Web應用系統Struts2應用框架默認采用FreeMarker作為其模板文件，並且Struts2應用框架中所有的主題模板文件都是采用FreeMarker模板技術編寫的。（2）Struts2應用框架全面提供對FreeMarker模板技術的支持在基於Struts2應用框架的Web應用系統中，開發人員隻需要將項目中的Action類的配置定義中的結果<result>標簽中的type屬行設置為：type="freemarker"，就可以自動地由Struts2應用框架中內帶的FreeMarker引擎完成模型數據和模板文件的總裝配和輸出（參看如下示例圖所示）。（3）Struts應用框架也同樣提供對FreeMarker模板技術的支持而在Struts應用框架中應用FreeMarker模板技術，開發人員隻需要在Web應用系統的部署描述文件web.xml中配置出與FreeMarker模板相關的FreemarkerServlet組件（參看如下示例圖所示），然後由該FreemarkerServlet組件將項目中的相關Action類中所保存的模型數據和模板文件相互集成組裝成最終的HTML頁面文件、並向Web瀏覽器輸出。作者將在下文及後續文章中為讀者介紹在J2EE Web應用系統、J2EE Struts應用框架的應用系統及J2EE Struts2應用框架的應用系統等環境中如何應用FreeMarker模板技術實現Web頁面靜態化的應用效果。作者首先在下文為讀者介紹在J2EE Web應用系統環境中如何應用FreeMarker模板技術。5、在J2EE Web應用項目中添加一個JSP頁面文件（1）在Web項目的userManage目錄下添加一個文件名稱為fmtWebUserLogin.jsp的JSP頁面文件，該頁面主要功能是模擬用戶系統登錄，其中包含有一個標準的HTML表單，創建的過程參看如下示例圖所示。（2）fmtWebUserLogin.jsp頁面文件的代碼示例<%@ page language="java" pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>My JSP 'fmtUserLogin.jsp' starting page</title>
</head><body>
<form action="/Struts2Web/fmtServletAction" method="post" >
您的名稱：<input type="text" name="userName" /> <br />
您的密碼：<input type="password" name="userPassWord" /> <br />
<input type="submit" value="提交" name="submitButton" onclick="this.value='正在提交請求，請稍候'"/>
<input type="reset" value="取消" />
</form>
</body></html>（3）fmtWebUserLogin.jsp頁面靜態預覽的效果圖如下圖所示6、在J2EE Web應用項目中添加一個Servlet組件在J2EE Web應用系統中使用FreeMarker模板時，應該讓J2EE Servlet組件來合並模板和數據。因此J2EE Servlet組件負責創建Configuration類型的對象實例，並負責合並模板和數據。（1）程序包名稱為com.px1987.struts2.servlet，類名稱為FMTServletAction，創建的過程參看如下示例圖所示。（2）將J2EE Servlet組件的URL-Pattern設置為/fmtServletAction，創建的過程參看如下示例圖所示。（3）FMTServletAction程序類的代碼示例package com.px1987.struts2.servlet;
import java.io.IOException;
import java.io.Writer;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import freemarker.template.Configuration;
import freemarker.template.Template;
import freemarker.template.TemplateException;
public class FMTServletAction extends HttpServlet {
private Configuration oneConfiguration=null;
public FMTServletAction() {
super();
}
public void init() throws ServletException {
/** 初始化FreeMarker配置，並創建出一個Configuration的實例 */
oneConfiguration = new Configuration(); //設置FreeMarker的模版文件位置
oneConfiguration.setServletContextForTemplateLoading(getServletContext(),"userManage");
} //第一個參數是本web應用的 ServletContext,第二個參數是模板文件的路徑
public void destroy() {
super.destroy();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String resultMessage=null;
String userName=request.getParameter("userName");
String userPassWord=request.getParameter("userPassWord");
boolean returnResult=userName.equals("yang") &&userPassWord.equals("1234");
if(returnResult){
resultMessage =userName+"您登錄成功!";
}
else{
resultMessage =userName+"您的身份信息無效!";
}
Map oneHashMap = new HashMap();
oneHashMap.put("showResultInfo", resultMessage); //取得模版文件
Template oneTemplate= oneConfiguration.getTemplate("showInfoFMTTemplate.ftl");
response.setContentType("text/html; charset=gb2312");
Writer out = response.getWriter();
try{ //結果必須輸出到HttpServletResponse中，才能被瀏覽器加載
oneTemplate.process(oneHashMap, out);
}
catch (TemplateException e){
throw new ServletException("加載FreeMarker的模板文件時出現瞭錯誤", e);
}
}
}7、在J2EE Web應用項目中添加一個FreeMarker模板文件（1）模板文件的名稱為showInfoFMTTemplate.ftl，創建的過程參看如下示例圖所示。（2）模板文件showInfoFMTTemplate.ftl的代碼示例如下，註意其中黑體標識的代碼<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head> <title>showInfoTemplate.ftl</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head> <body>
<h2>采用標準的方式獲得參數值： ${showResultInfo}</h2 > <br>
</body></html>8、部署本Web項目並啟動測試頁面以驗證本示例的功能（1）正確地部署完畢本Web項目後，在瀏覽器的URL地址欄中輸入如下示圖中的訪問地址，啟動測試頁面，執行的結果參看如下示例圖所示。（2）在測試頁面的表單中模擬用戶登錄系統的狀態，輸入相關的登錄參數後的執行結果參看如下示例圖所示。從本示例的執行結果來看，在showInfoFMTTemplate.ftl頁面中同樣也可以獲得在傳統的J2EE Web應用環境中一般由動態JSP類型的Web頁面才能獲得的動態結果數據，但本示例中的*.ftl頁面是靜態效果的Web頁面。因此，最終實現和達到瞭"動態頁面靜態化"的高效響應的應用效果。作者為瞭能夠讓讀者進一步地理解"動態頁面靜態化"的應用效果，可以通過瀏覽結果頁面相關的源程序從而確認最終是否為一個HTML格式的純靜態頁面。讀者可以在Web瀏覽器中右鍵單擊，然後在彈出的快捷菜單項目中選擇"查看源文件"的功能子菜單項目（參看如下示例圖所示）。將在Web瀏覽器中顯示出用戶當前正在瀏覽的Web頁面的源代碼，熟悉HTML語言的讀者應該能夠看懂其中的代碼含義——全部為HTML格式的純靜態頁面標簽。如何應用XML+XSLT+AJAX組合技術實現無刷新數據查詢應用XML+XSLT技術分離Web應用表示層數據和樣式的實例如何應用“XML+XSLT”技術分離Web表示層數據和樣式課程設計指導——應用AJAX技術提高Web應用的整體響應性能如何在Web應用系統表示層開發中應用Velocity模板技術

相关文章