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

這篇文章主要講解決思路，不對(duì)各種概念進(jìn)行過多講解。

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

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

從網(wǎng)上看了幾種比較常見的解決思路，下面簡(jiǎn)單講解。

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

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

history.replaceState({}, "title", href);
// 比如當(dāng)前頁面地址為http://www.a.com; 通過history.replaceState修改后當(dāng)前地址會(huì)變?yōu)閔ttp://www.a.com?time=xxx

網(wǎng)上這種解決思路比較多，實(shí)際情況中并不可行。
原因：Ios微信中調(diào)整到下一頁面后并未將上一頁面修改的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);
    
    // 當(dāng)前步驟與上一步驟時(shí)間差超過1秒，表示頁面已經(jīng)跳轉(zhuǎn)過
    // 時(shí)間差需要與間隔時(shí)間相對(duì)應(yīng)
    if (now - prev > 1) {
        location.reload();
    } else {
        prev = now;
    }
// 間隔時(shí)間設(shè)置為1秒
}, 1000);

原理：通過判斷當(dāng)前步驟與上一步驟的時(shí)間差來判斷是否需要更新
缺點(diǎn)：

間隔輪詢時(shí)間差長(zhǎng)度設(shè)置為多久比較好，不好掌控；
通過setInterval設(shè)置的間隔時(shí)間差并不是很精確；
并且兩個(gè)頁面之間的反復(fù)切換速度非常迅速的情況下也許會(huì)出現(xiàn)監(jiān)測(cè)不到的現(xiàn)象。

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

原理：通過獲取瀏覽器保存的key來決定頁面是否需要刷新
缺點(diǎn)：當(dāng)頁面關(guān)閉再重新打開時(shí)，key（也就是代碼中的need-refresh）key值為true，會(huì)導(dǎo)致頁面加載兩次，造成重復(fù)渲染

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

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

關(guān)于瀏覽器緩存
瀏覽器前進(jìn)/后退緩存（BF Cache）
瀏覽器頁面進(jìn)入、離開事件：pageshow/pagehide