HTML 快取中單個 URL 的多個不同快取?


內容快取是實現快速流暢使用者體驗的有效方法。網頁中的每個 URL 都可以連結到快取清單的單個部分。但是,某些大型且很少使用的檔案會降低快取的整體速度。由於它們不需要更改,但每次快取更新時仍會重新下載,因此最好將此類檔案儲存在具有相同 URL 的不同快取中。這將提高其速度和效能。

那麼,如何分割 HTML 快取?在此之前,讓我們瞭解什麼是 HTML 快取。

什麼是 HTML 快取?

快取是一種儲存請求的給定響應,然後重用儲存的響應以滿足後續類似請求的方法。它存在於從原始伺服器到 Web 瀏覽器的整個過程中。

重用儲存的響應可以提高伺服器響應速度。它還可以提高硬體的效能。

HTML 快取是快取網頁的 HTML 內容。

示例

<!DOCTYPE HTML> <html manifest = “example.appcache” > <body> <h1> This is an example </h1> </body> </html>

快取型別

HTTP 快取儲存請求和響應,以便在後續請求中重用它們。它可以分為兩種型別:**共享快取**和**私有快取**。

共享快取

它是一個在原始伺服器和多個客戶端之間儲存資料的快取。它儲存響應並將其與所有客戶端重用。

因此,它不包含個性化內容。

私有快取

此快取僅儲存客戶端的內容。它為單個客戶端使用者儲存響應。因此,開發人員可以將個性化內容儲存在此快取中。

快取控制

**快取控制** HTTP 標頭指定用於管理來自請求和響應的快取資料的指令。

它具有各種指令,例如 no-transform、max-age、no-store、no-cache、private 和 public。讓我們在下面討論一些。

max-age

它是快取控制的響應指令之一,指示快取在生成響應後 X 秒內保持新鮮。

在此,新鮮狀態告訴瀏覽器響應仍然有效。因此,它可以被重用。而陳舊狀態表示響應無效,即已過期。

語法

Cache-Control: max-age = X

示例

Cache-Control: max-age = 856098

s-maxage

它也是一個響應指令,指示快取是新鮮的還是陳舊的。但是,它僅適用於共享快取。

示例

Cache-Control: s-maxage = 766498

時間戳

時間戳是檔案或日誌中記錄的時間,指示其內容新增、修改或傳輸的時間。其參考日期為 1970 年 1 月 1 日 UTC。

示例

此程式碼塊以毫秒為單位提供時間戳。

Date.now = function demo() { return new Date().getTime(); }

在 Javascript 中,您可以使用 Date.now()

為了以秒為單位獲取時間戳,請將其除以 1000。

示例

function demo() { return Math.floor (Date.now() / 1000); }

**注意** - Math.floor() 函式用於獲取小於或等於給定數字的最大整數。

示例

console.log( Math.floor(5.95));

解決此問題的最佳方法是對清單快取部分中的所有檔案使用 max-age,併為快取中的每個檔案新增時間戳。

如果其中任何檔案被修改,清單將更新時間戳。因此,只有在快取處理期間具有更新時間戳的檔案才會被下載。

示例

首先,讓我們建立一個快取清單檔案

<!DOCTYPE HTML> <html manifest = “example.appcache” > <body> <h1> This is an example </h1> </body Cache-Control: max-age =567890> </html>

CACHE 清單

快取 -

/example.html
/demo.js

結論

正確處理快取會對您的網站產生重大影響。快取提供了高速和增強的使用者介面效能,即使用者享受更快的體驗。它還使網站伺服器能夠使用相同的硬體管理更多的網路流量。最重要的是,它具有成本效益,甚至可以重複提供相同的內容。簡而言之,正確的快取為開發人員提供了各種好處。

更新於: 2022 年 10 月 13 日

275 次檢視

開啟您的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.