頁面靜態化技術演進

Awecoder發表於2021-11-10

文章主要包含四部分：

  • 傳統MVC開發：JSP和Thymeleaf的弊端
  • 動靜請求分離：非同步請求
  • 靜態請求快取效率化：CDN
  • 動態請求快取效率化：Nginx shared dic
  • 全頁面靜態化技術：無頭瀏覽器

1 SpringBoot Thymeleaf模板

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

  • 傳統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。

image

3 靜態請求快取效率化

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

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

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

未使用CDN技術
image

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

客戶端發起請求到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:客戶端傳送的匹配資源最後修改時間的識別符號

4 動態請求快取

4.1 動態請求前置快取

前置快取的使用，提高查詢速度，減少資料庫訪問量。

  • Redis集中式快取
  • 本地快取：Tomcat快取

包括主動失效、被動失效，需要解決快取擊穿、降級等問題。

image

4.2 使用Nginx proxy cache

image
Nginx Lua指令碼程式設計定製化：

在nginx生命週期中，Lua通過協程機制在某些環節實現鉤子機制。例如master程式建立worker程式時，執行初始化指令碼；檢測到某個url請求時，直接呼叫Redis返回response，從而省掉springboot webmvc流程。

Nginx proxy cache使用較少，因為再快的檔案讀寫速度也比不上記憶體的讀寫速度。

4.3 Nginx shared dic 本地快取

原理：nginx伺服器的記憶體快取，所有worker程式共享，通過lua操作。
image
image
lua指令碼
image

獲取快取空間，從中獲取list快取。如果為空則轉發請求，獲取響應資料並快取。

5 全頁面靜態化技術

原理：服務端通過類似爬蟲的技術直接完成動態請求載入完成後的靜態頁面，將HTML、CSS、JS資源全部載入完後的頁面生成後部署到CDN上。

我們訪問頁面，發起靜態請求從CDN中獲取html資原始檔，發起動態請求訪問nginx、tomcat獲取響應資料，然後在客戶端渲染頁面。需要三步操作。

如果將渲染好的頁面直接放到CDN上，則客戶端可以直接獲取。

image

優勢：無需載入、無需動態請求、可全部CDN化

實現：

  • 類似爬蟲的技術

  • 無頭瀏覽器：類似瀏覽器，載入HTML檔案，執行JavaScript，執行Ajax請求，獲取資料，填充到DOM，輸出靜態資原始檔。

HtmlUnit

Httpclient無法搞定動態請求，HtmlUnit可用於爬蟲，測試自動化工具等

HtmlUnit是一個無介面瀏覽器Java程式。為HTML文件建模，提供了呼叫頁面、填寫表單、單擊連結等操作的APl。提供了對 Javascript的支援，甚至可以使用相當複雜的Ajax庫，根據配置的不同模擬 Chrome、 Firefox等瀏覽器。

image

上圖.test.html書寫錯誤

相關文章