Ios中微信頁面返回上一頁去除緩存幾種常見思路

前言

這篇文章主要講解決思路，不對各類概念進行過多講解。

問題描述

開發微信H5頁面的時候，在Ios微信內置瀏覽器中點擊返回按鈕返回上一頁時，上一頁面不會被刷新。
在瀏覽器緩存機制中，在返回上一頁的操做中， html/js/css/接口等動靜態資源不會從新請求，可是js會從新加載。但在Ios微信頁面中js也會保存上一頁面最後執行的狀態，不會從新執行js。
使用這種模式緩存機制能夠加快渲染速度，可是部分數據須要常常展現和編輯的狀況下回致使不一樣步。好比「詳情頁」跳轉到「編輯頁」，在「編輯頁」中修改數據後返回到詳情頁中，「詳情頁」數據展現並未進行同步修改。

產生緣由

這裏提到一個概念，瀏覽器前進/後退緩存，（Backward/Forward Cache，BF Cache），固然也有人叫disk Cache。
BF Cache 是一種瀏覽器優化，HTML標準並未指定其如何進行緩存，所以緩存行爲是各瀏覽器實現不盡相同。
因爲不是Http緩存，因此經過頭文件緩存設置no-cache是無效的。固然也不能以Http緩存機制來理解BF Cache。

解決思路

從網上看了幾種比較常見的解決思路，下面簡單講解。

設置瀏覽歷史當前記錄

history.replaceState方法的參數與pushState方法如出一轍，區別是它修改瀏覽歷史中當前紀錄。

var href = location.href;
var time = new Date().getTime();
href += href.indexOf('?') > -1 ? ('&time='+time) : ('?time=' + time);

history.replaceState({}, "title", href);
// 好比當前頁面地址爲http://www.a.com; 經過history.replaceState修改後當前地址會變爲http://www.a.com?time=xxx

網上這種解決思路比較多，實際狀況中並不可行。
緣由：Ios微信中調整到下一頁面後並未將上一頁面修改的url保持在歷史記錄中，以代碼爲例，返回上一頁並未返回到 http://www.a.com?time=xxx ，
而是返回到 http://www.a.com 中。

經過時間差來判斷是否須要重置

var prev = parseInt(new Date().getTime() / 1000);
var now = prev;

window.setInterval(function() {
    now = parseInt(new Date().getTime() / 1000);
    
    // 當前步驟與上一步驟時間差超過1秒，表示頁面已經跳轉過
    // 時間差須要與間隔時間相對應
    if (now - prev > 1) {
        location.reload();
    } else {
        prev = now;
    }
// 間隔時間設置爲1秒
}, 1000);

原理：經過判斷當前步驟與上一步驟的時間差來判斷是否須要更新
缺點：

間隔輪詢時間差長度設置爲多久比較好，很差掌控；
經過setInterval設置的間隔時間差並非很精確；
而且兩個頁面之間的反覆切換速度很是迅速的狀況下也許會出現監測不到的現象。

經過localStorage控制是否須要刷新

localStorage.setItem("need-refresh", true);
$(function () {
    var needRefresh = localStorage.getItem("need-refresh");
    if(needRefresh) {
        localStorage.removeItem("need-refresh");
        location.reload();
    }
});

原理：經過獲取瀏覽器保存的key來決定頁面是否須要刷新
缺點：當頁面關閉再從新打開時，key（也就是代碼中的need-refresh）key值爲true，會致使頁面加載兩次，形成重複渲染

經過pageshow事件決定是否須要刷新頁面

window.addEventListener('pageshow', function(e) {
    // 經過persisted屬性判斷是否存在 BF Cache
    if (e.persisted) {
        location.reload();
    }
});

原理：pageShow事件在頁面顯示即會觸發，不管頁面是否來自BF Cache。經過檢測persisted屬性便可判斷是否存在 BF Cache 行爲。
優勢：大部分瀏覽器都支持pageShow方法與persisted屬性，而且須要的代碼量只須要短短4行便可。
缺點：每種瀏覽器中BF Cache的機制是不一樣的，部分瀏覽器中的Bf Cache仍是會從新執行js代碼，會形成重複渲染效果。固然這篇文章中咱們只考慮Ios中的微信頁面， 因此是不存在問題。

參考資料

關於瀏覽器緩存
瀏覽器前進/後退緩存（BF Cache）
瀏覽器頁面進入、離開事件：pageshow/pagehide