頁面靜態化技術演進

2021 年 11 月 10 日
筆記
Ajax, CDN, HtmlUnit, Nginx, 架構, 頁面靜態化

文章主要包含四部分：

傳統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:客戶端發送的匹配資源最後修改時間的標識符