頁面靜態化技術演進

文章主要包含四部分：

傳統MVC開發：JSP和Thymeleaf的弊端

動靜請求分離：非同步請求

靜態請求快取效率化：CDN

動態請求快取效率化：Nginx shared dic

全頁面靜態化技術：無頭瀏覽器

1 SpringBoot Thymeleaf模板

原理：服務端渲染、模版變數替換。與 Spring Boot，MVC方言完美結合。

優勢

傳統J2E使用JSP方式開發，但 Spring Boot對JSP支援不好。JSP規範與Servlet規範緊密耦合，使用JSP需要喚起servlet程式。
Thymeleaf支援HTML原型，可靜態使用。

劣勢

傳統模板頁面基於服務端，需要喚起servlet容器，走springmvc全套流程。
模板渲染IO操作
較難快取。使用者請求在訪問到springboot server時，還會經過nginx，如果使用模板渲染，很難在nignx上做快取。

2 動靜請求分離

動靜分離的設計原理：區分動靜態請求。

動態請求:每次都從服務端獲取資料請求。
靜態請求:不必每次從服務端獲取的頁面展示請求。

優勢

架構分離：分層優化
快取策略分離：例如前端做nginx、瀏覽器、cdn等快取。
研發框架分離：提高研發效率。

靜態資源伺服器，例如nignx；動態請求伺服器，例如Tomcat；前後端採用Ajax等前端非同步化互動技術發起請求，獲取資料，填充靜態頁面。

實現技術

Ajax是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。

Nginx可以用作動態請求反向代理，也可以用作靜態請求使用html resources。

3 靜態請求快取效率化

主要是CDN分發技術和Nginx proxy cache檔案快取。

CDN是內容分發網路，具有高效能、高可用、高擴充套件性的優點。

CDN是帶有快取性質的網路節點。即CDN是web伺服器，提供了靜態資源快取機制。
分發能力，請求分發到最近的節點。
具有負載均衡能力，沒有單點問題。
需要專門運營維護CDN網路。

未使用CDN技術

使用CDN技術快取靜態資源。

客戶端發起請求到DNS，查詢ip地址，根據CNAME返回CDN管控節點域名，實現DNS解析權移交。管控節點根據請求ip地址分發到最近的CDN節點（負載均衡與分發）。如果在CDN節點命中快取，直接返回，否則請求靜態資源並備份。

運營廠商CDN實現原理中，HTTP 快取頭起到了重要作用。

Http快取頭 cache-ctrol

private:客戶端可以快取.

public:客戶端和代理伺服器都可以快取。

max-age=xxx:快取的內容將在XXX秒後失效。

no- cache:強制向服務端再驗證一次，判斷是否生效。

no-store:不快取請求的任何返回內容。

有效性判斷（驗證時帶上如下引數）

ETag:資源唯一標識

If-None-Match:客戶端傳送的匹配Etag識別符號

Last- modified:資源最後被修改的時間

If- Modified- Since:客戶端傳送的匹配資源最後修改時間的識別符號