HTML5應用程式快取(Application Cache)簡介

2020-07-16 10:04:46
說到“春運”,大家都會聯想到擁擠的火車站的畫面,究其原因,是突發的客流量沖垮了有限的客運資源。乘客和座位之間是“一個蘿蔔一個坑”的關係,乘客多、座位少,自然有人買不到票。

其實,類比網際網路上的網頁,道理是一樣的。使用者用瀏覽器開啟一個網頁的 URL,相當於發生了若干次下載,如果伺服器頂不住,導致一些存取失敗,會帶來很糟糕的使用者體驗。

遇到這種情況,開發者或許會考慮對伺服器“擴容”。擴容說起來簡單,操作起來需要很多資金開銷,但通過使用 Application Cache 技術可以達到擴容的目的,代價只是多加幾句程式碼。

Application Cache 是 HTML5 中定義的一種離線儲存技術標準。這種技術可以讓開發者明確地指定頁面中哪些靜態資源可以在第一次存取網頁的同時快取到本地,並且在下次存取該網頁時向伺服器詢問本地快取的資源是否需要更新。

當瀏覽器開啟使用了 Application Cache 技術的網頁時,會嘗試先從 Cache 中載入資料,並同時向伺服器詢問本地資源是否已經過期,如果本地資源過期,瀏覽器會自動從伺服器上更新資源到 Cache 中。

需要說明的是,如果 Cache 中的資料可用,瀏覽器就會對其進行載入,即使它們已經過期。頁面可以通過註冊監聽器的方式獲得 Cache 更新成功的事件,主動重新整理一下頁面,將最新的內容及時展示給使用者。

Application Cache 技術通過快取資源到本地,避免了每次開啟網頁都會從伺服器拉取大量資料的過程,取而代之的只是一個輕量級的更新檢查請求,這樣,開發者的伺服器頻寬就被大大地釋放出來。

另外,由於網頁的資源都是通過本地資源讀取的,使用者再次開啟同一頁面時,內容展示時間會大大縮短,甚至達到 Native 應用的水平, 從而進一步優化使用者體驗。

如果頁面的所有資源都被快取到了本地,那麼頁面就可以在離線的情況下被完整地載入了。

所以,如果 Application Cache 用得好,Web 應用可以獲得媲美 Native 應用的啟動速度和離線使用的能力,同時釋放伺服器的頻寬。