一、微信H5緩存概述

微信H5緩存是指在微信公眾號中，通過使用HTML5的AppCache（Application Cache）特性實現在離線狀態下瀏覽器仍能夠訪問web應用程序和頁面。該緩存可以有效地幫助提高用戶訪問速度及用戶體驗，並且可以減輕web伺服器的負擔，降低伺服器的帶寬和流量消耗。在微信H5緩存中，主要包含兩部分內容：清單文件(manifest)和資源文件(assets)。

二、微信H5緩存清單文件(manifest)的使用

在微信H5應用中使用 MANIFEST 的方法如下：

CACHE MANIFEST
# 2017-08-21 v1.0.0
/assets/css/style.css
/assets/js/main.js
/assets/img/logo.png
NETWORK:
*

以上代碼中，CACHE MANIFEST 是 MANIFEST 文件的頭部，表示此文件是一個 MANIFEST 文件；#後面的內容是該文件的版本信息；而第2行以下的內容表示要被緩存的文件。需要注意的是，清單文件中的路徑需要相對於 manifest 文件的路徑來指定。NETWORK: * 表示所有其他內容，不包括被 CACHE MANIFEST 標記的文件，都將需要進行網路請求。

當瀏覽器訪問緩存內容時，則會先檢查 CACHE MANIFEST，如果清單未變化，則快速返回緩存內容。否則，瀏覽器將下載 MANIFEST 唯一文件，並且檢查 MANIFEST 中的每個文件是否有變化來更新瀏覽器中的緩存。即當cache.manifest 有更新時，用戶下次訪問頁面時，瀏覽器會自行升級版本。

三、微信H5資源文件(assets)的使用

在清單文件中指示要緩存的文件後，還需要將所需資源放置在相應目錄下，以便瀏覽器在離線狀態下仍然可以訪問到這些資源。

    
    
    


    
歡迎來到 H5 緩存示例頁面
    
    

以上代碼展示了如何在 HTML 頁面中使用 MANIFEST：

• 需要在 HTML 根節點中添加 manifest 屬性，來表示該頁面需要類似於應用程序的緩存支持；
• 緩存的資源需要相對於 manifest 文件的路徑來指定，如 img 標籤中的 /assets/img/logo.png；
• 當資源文件有更新時，CACHE MANIFEST 會被更新，並且下一次訪問時瀏覽器會自動下載更新版本。

四、微信H5緩存注意事項

微信H5緩存需要注意以下事項：

• 清單文件中的每一個文件都必須經過緩存，一旦未能緩存將導致其餘文件無法使用；
• 請確保清單文件的屬性為正確的 MIME 類型 text/cache-manifest，否則IE將無法正確使用
• 請在Manifest文件的頭部作為注釋註明文件的版本號，用於清理緩存；
• 清單文件中的必須是相對於 HTML 頁面的相對路徑；
• 清單文件中區分大小寫，文件名和文件路徑都需要正確包括大小寫；
• 清單文件 MANIFEST 中，必須設置 NETWORK: *，否則你的應用將無法與伺服器通信。

五、微信H5緩存優化建議

對於微信H5緩存的優化，有以下幾點建議：

• 請合理使用清單文件，確保清單文件中只包含必要文件，避免無效資源的緩存；
• 請注意清單文件的大小，不要將清單文件過大，增加用戶載入時間；
• 請定期更新版本信息，以便強制用戶緩存更新；
• 儘可能地將使用的資源文件壓縮，減小文件大小，提高訪問速度。