本文原始碼：[GitHub·點這裡](https://github.com/cicadasmile/middle-ware-parent) || [GitEE·點這裡](https://gitee.com/cicadasmile/middle-ware-parent) # 一、頁面靜態化 ## 1、動靜態頁面 **靜態頁面** 即靜態網頁，指已經裝載好內容HTML頁面，無需經過請求伺服器資料和編譯過程，直接載入到客戶瀏覽器上顯示出來。通俗的說就是生成獨立的HTML頁面，且不與伺服器進行資料互動。 優缺點描述： - 靜態網頁的內容穩定，頁面載入速度極快； - 不與伺服器互動，提升安全性； - 靜態網頁的互動性差，資料實時性很低； - 維度成本高，生成很多HTML頁面； **動態頁面** 指跟靜態網頁相對的一種網頁程式設計技術，頁面的內容需要請求伺服器獲取，在不考慮快取的情況下，服務介面的資料變化，頁面載入的內容也會實時變化，顯示的內容卻是隨著資料庫操作的結果而動態改變的。 優缺點描述： - 動態網頁的實時獲取資料，延遲性低； - 依賴資料庫互動，頁面維護成本很低； - 與資料庫實時互動，安全控制的成本高； - 頁面載入速度十分依賴資料庫和服務的效能； 動態頁面和靜態頁面有很強的相對性，對比之下也比較好理解。 ## 2、應用場景 動態頁面靜態化處理的應用場景非常多，例如： - 大型網站的頭部和底部，靜態化之後統一載入； - 媒體網站，內容經過渲染，直接轉為HTML網頁； - 高併發下，CDN邊緣節點代理的靜態網頁； - 電商網站中，複雜的產品詳情頁處理； 靜態化技術的根本：提示服務的響應速度，或者說使響應節點提前，如一般的流程，頁面(客戶端)請求服務，服務處理，響應資料，頁面裝載，一系列流程走下來不僅複雜，而且耗時，如果基於靜態化技術處理之後，直接載入靜態頁面，好了請求結束。 # 二、流程分析 靜態頁面轉換是一個相對複雜的過程，其中核心流程如下：  - 開發一個頁面模板，即靜態網頁樣式； - 提供介面，給頁面模板獲取資料； - 頁面模板中編寫資料介面返參的解析流程； - 基於解析引擎，把資料和頁面模板合併； - 頁面模板內容載入完成後轉換為HTML靜態頁面； - HTML靜態頁面上傳到檔案伺服器； - 客戶端(Client)獲取靜態頁面的url載入顯示； 主流程大致如上，如果資料介面響應引數有變，則需要重新生成靜態頁，所以在資料的載入實時性上面會低很多。 # 三、程式碼實現案例 ## 1、基礎依賴 FreeMarker是一款模板引擎：即一種基於模板和要改變的資料，並用來生成輸出文字（HTML網頁、電子郵件、配置檔案、原始碼等）的通用工具。 ```xml ``` ## 2、頁面模板 這裡既使用FreeMarker開發的模板樣式。 ```html 主題：${myTitle}
<#assign text="{'auth':'cicada','date':'2020-07-16'}" /> <#assign data=text?eval /> 作者：${data.auth} 日期：${data.date}
<#list tableList as info>

規格描述	產品詳情
${info.desc}

<#list imgList as imgIF> ``` FreeMarker的語法和原有的HTML語法基本一致，但是具有一套自己的資料處理標籤，用起來不算複雜。 ## 3、解析過程 通過解析，把頁面模板和資料介面的資料合併到一起即可。 ```java @Service public class PageServiceImpl implements PageService { private static final Logger LOGGER = LoggerFactory.getLogger(PageServiceImpl.class) ; private static final String PATH = "/templates/" ; @Override public void ftlToHtml() throws Exception { // 建立配置類 Configuration configuration = new Configuration(Configuration.getVersion()); // 設定模板路徑 String classpath = this.getClass().getResource("/").getPath(); configuration.setDirectoryForTemplateLoading(new File(classpath + PATH)); // 載入模板 Template template = configuration.getTemplate("my-page.ftl"); // 資料模型