快取靜態內容與動態內容:如何運作?

與靜態內容不同,動態內容對於每一使用者而言皆不相同,這也表示無法將其提供給多位使用者,並且很難進行快取。但若使用正確的技術,快取動態內容並無不可。

學習目標

閱讀本文後,您將能夠:

  • 區分靜態內容與動態內容
  • 瞭解動態內容為何難以快取,以及新技術如何使快取動態內容成為可能
  • 瞭解動態內容快取與動態內容壓縮之間的區別
  • 瞭解 Edge Side Includes 標記如何有助於快取動態網頁的靜態部份

相關內容


想要繼續瞭解嗎?

訂閱 TheNET,這是 Cloudflare 每月對網際網路上最流行見解的總結!

請參閱 Cloudflare 的隱私權政策,了解我們如何收集和處理您的個人資料。

複製文章連結

靜態內容和動態內容有何區別?

靜態內容是儲存在伺服器中的任何檔案,每次傳遞給使用者時都相同。譬如,HTML 檔案和圖像就是此類內容。靜態內容就如報紙一般:一期報紙一旦發行後,拿起一份閲讀的人都會看到相同的文章和照片,不論這一整天發生什麽新的情況。

動態內容是根據使用者特定的因素 (例如造訪時間、位置和裝置) 而變化的內容。一個動態網頁在每個人眼中皆不相同,而且可以隨著使用者與之互動而改變,就像報紙能夠在讀者閱讀過程中重新編寫一般。這使得網頁更加個人化,更具互動性。

靜態網頁 動態網頁

現代新聞網站是動態內容的一個好例子:與報紙不同,文章在一天當中持續更新,而且首頁也能根據網站訪客的位置或登入狀態呈現不同的標題。社交媒體頁面是另一個範例:Facebook 新聞提要對於每個使用者而言全然不同,使用者能夠與內容進行互動來改變內容 (透過按讚、分享或評論貼文)。

動態網頁不儲存為靜態 HTML 檔案。相反,伺服器端指令碼會回應事件 (例如使用者互動或登入) 來產生 HTML 檔案,並將 HTML 檔案傳送到網頁瀏覽器。因為動態內容是在伺服器端產生,所以提供服務的通常是原始伺服器,而不是快取。

長期以來,動態內容被認為不可快取。但新技術使網站能夠從快取提供動態內容,在維持使用者體驗互動性的同時顯著減少延遲

如何快取靜態內容?

通常情況下,Web 快取過程是在提供內容時由快取儲存靜態檔案 (例如圖像) 的副本,以便下次能在更接近該使用者的地方更快地提供。瀏覽器和內容傳遞網路 (CDN) 能在設定的時間段內快取靜態內容,並在繼續收到對內容的請求時向使用者提供。這是因為靜態內容不會隨著時間而變化;相同的檔案可以反覆提供給使用者。

動態內容快取如何運作?

動態內容由改變頁面內容的指令碼產生。指令碼在 CDN 快取中而不是遠端原始伺服器上執行,從快取產生動態內容並傳遞給使用者。因此,動態內容本質上是「已快取」,不必一直回到原點來提供內容,減少了對用戶端請求的回應時間,並加快了動態網頁的速度。

例如,Cloudflare Workers 是在 Cloudflare CDN 運作的無伺服器 JavaScript 功能。這些功能可以回應各種事件和輸入,包括裝置類型、一天中的時間、使用者位置或來自第三方 API 的資料。基於這些參數,伺服器可以產生動態內容並將其提供給用戶端裝置,或者可以改變、快取靜態內容或從快取中清除靜態內容。

因為 Cloudflare Workers 是 JavaScript 程式碼,所以除了快取動態內容外,開發人員還可以使用這些程式碼來建構各種功能或完整的應用程式。此外,還可以部署 Cloudflare Workers,並在幾秒鐘內傳播到全球 CDN 位置。

Cloudflare Workers 在羽量級執行環境中執行,以便程式碼可以運轉並在幾毫秒內執行。這使開發人員可以在執行程式碼時不必為後端設定而操心。進一步瞭解無伺服器運算

動態內容快取與動態內容壓縮有何區別?

還有一種加速動態網頁的方式,壓縮原始伺服器產生的動態內容,並盡可能快速和高效地傳遞這些內容。採用動態壓縮時,內容依然來自原始伺服器而非快取,但產生的 HTML 檔案明顯縮小,進而更迅速地到達用戶端裝置。

使用 Edge Side Includes (ESI) 如何能加快動態網頁速度?

通常,動態網頁上的大量內容對所有使用者來説都一致,唯有頁面上的某些元素是動態的。換而言之,在頁面的各個動態副本中,許多 HTML 程式碼都是重複的。為解決這種低效率問題,許多公司共同開發了 Edge Side Includes (ESI),這種標記語言用於指定動態內容在網頁上的顯示位置。(ESI 在某些 CDN 上使用,但尚未被 W3C (管理 Web 標準的組織) 接受。)

帶有 ESI 標記的內容從其他地方擷取,而網頁的其餘內容可以被快取。如果網頁中只有部份內容是動態產生,其餘部份是快取,那麼網頁載入速度將遠遠快於需要為每個使用者產生整個網頁的速度。ESI 可與 Cloudflare Workers 結合使用,使這個過程的效率更高。