摘要：但在微信頁面中也會保存上一頁面最后執(zhí)行的狀態(tài)，不會重新執(zhí)行。原因微信中調整到下一頁面后并未將上一頁面修改的保持在歷史記錄中，以代碼為例，返回上一頁并未返回到，而是返回到中。

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

開發(fā)微信H5頁面的時候，在Ios微信內置瀏覽器中點擊返回按鈕返回上一頁時，上一頁面不會被刷新。
在瀏覽器緩存機制中，在返回上一頁的操作中， html/js/css/接口等動靜態(tài)資源不會重新請求，但是js會重新加載。但在Ios微信頁面中js也會保存上一頁面最后執(zhí)行的狀態(tài)，不會重新執(zhí)行js。
使用這種模式緩存機制可以加快渲染速度，但是部分數(shù)據(jù)需要經常展示和編輯的情況下回導致不同步。比如“詳情頁”跳轉到“編輯頁”，在“編輯頁”中修改數(shù)據(jù)后返回到詳情頁中，“詳情頁”數(shù)據(jù)展示并未進行同步修改。

這里提到一個概念，瀏覽器前進/后退緩存，（Backward/Forward Cache，BF Cache），當然也有人叫disk Cache。
BF Cache 是一種瀏覽器優(yōu)化，HTML標準并未指定其如何進行緩存，因此緩存行為是各瀏覽器實現(xiàn)不盡相同。
由于不是Http緩存，所以通過頭文件緩存設置no-cache是無效的。當然也不能以Http緩存機制來理解BF Cache。

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

history.replaceState方法的參數(shù)與pushState方法一模一樣，區(qū)別是它修改瀏覽歷史中當前紀錄。

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修改后當前地址會變?yōu)閔ttp://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設置的間隔時間差并不是很精確；
并且兩個頁面之間的反復切換速度非常迅速的情況下也許會出現(xiàn)監(jiān)測不到的現(xiàn)象。

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，會導致頁面加載兩次，造成重復渲染

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

原理：pageShow事件在頁面顯示即會觸發(fā)，無論頁面是否來自BF Cache。通過檢測persisted屬性即可判斷是否存在 BF Cache 行為。
優(yōu)點：大部分瀏覽器都支持pageShow方法與persisted屬性，并且需要的代碼量只需要短短4行即可。
缺點：每種瀏覽器中BF Cache的機制是不同的，部分瀏覽器中的Bf Cache還是會重新執(zhí)行js代碼，會造成重復渲染效果。當然這篇文章中我們只考慮Ios中的微信頁面， 所以是不存在問題。

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