靜態資源緩存經常使用的方式

時間 2019-11-14

原文原文鏈接

　　　最近遇到項目優化的問題，因爲項目用到的框架，函數庫比較多，致使首次須要加載3.6M的文件，那麼問題來了，當網絡不好的時候，不少文件就會timeout.而後就掛了。因此就開始用到離線緩存，一些文件靜態的函數庫開始緩存起來，一些常常更新的文件每次上線加版本號更新。html

下面說說離線緩存，長話短說，很簡單，只要完成簡單的幾個步驟nginx

1，建立一個後綴名爲.appcache的文件（如：list.appcache）,裏面配置項也很簡單，同上web

CACHE MANIFEST：這裏面把你須要緩存的文件列出來，注意路徑哈。chrome

NETWORK：指定只有經過聯網才能瀏覽的文件.通常寫通配符 * 號（*表明除了在CACHE中的文件）瀏覽器

　 FALLBACK: 當上面文件嘗試加載失敗時，轉換成下面列出的備用條目。緩存

2.把list.appcache添加到頁面中得HTML中tomcat

<html lang="zh-cn" manifest="/list.appcache" type="text/cache-manifest">

3.咱們能夠經過調試器看或者 chrome://appcache-internals/ 能夠訪問服務器

小結：網絡

離線訪問對基於網絡的應用而言愈來愈重要。雖然全部瀏覽器都有緩存機制，但它們並不可靠，也不必定總能起到預期的做用。HTML5 使用ApplicationCache 接口解決了由離線帶來的部分難題。前提是你須要訪問的web頁面至少被在線訪問過一次。app

使用離線加載有幾大優點，首先能夠在沒有網絡的狀況下訪問緩存的資源，第二，能夠加快網頁加載速度。

此外，若是報錯，首先檢測訪問文件地址是否正確（大部分是這個緣由致使），還有就是須要服務器支持，好比tomcat須要修改config文件（nginx我試過，是能夠識別，不用額外修改）

<mime-mapping>  
       <extension>manifest</extension>  
       <mime-type>text/cache-manifest</mime-type>  
</mime-mapping>

今天就暫時寫到這裏了

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。