在移動(dòng)端項(xiàng)目中遇到了點(diǎn)擊瀏覽器返回鍵，頁面不刷新的問題，通過研究學(xué)習(xí)，采用了以下的解決方案。問題解決了。

（一）移動(dòng)端點(diǎn)擊返回鍵，頁面不刷新解決方案

移動(dòng)端瀏覽器點(diǎn)擊返回上一級(jí)，頁面不刷新的原因之一：返回上一級(jí)的頁面是從往返緩存bfcache）中獲取的,而瀏覽器保存了DOM和js的狀態(tài)，再次打開時(shí)不觸發(fā)onload事件，即頁面不會(huì)重新加載。
可在js代碼中增加以下頁面強(qiáng)制刷新的代碼：
1、判斷頁面是否存在“往返緩存”；
2、如果存在，重新加載當(dāng)前頁面。

  // 點(diǎn)擊瀏覽器返回按鈕，404頁面刷新
 window.addEventListener('pageshow', function (event) {
//event.persisted屬性為true時(shí)，表示當(dāng)前文檔是從往返緩存中獲取
  if (event.persisted) location.reload();
 });

pageshow和onload很相似：
“pageshow”：每次瀏覽網(wǎng)頁時(shí)觸發(fā)，事件必須綁在window上；
“onload”：第一次瀏覽時(shí)觸發(fā)（用于頁面從瀏覽器緩存中獲取時(shí)，不觸發(fā)）；

（二）“往返緩存”

"往返緩存"(back-forward cache,簡稱bfcache),當(dāng)用戶點(diǎn)擊前往新頁面時(shí)，會(huì)把當(dāng)前頁面(包括頁面數(shù)據(jù)、DOM、JS狀態(tài)等)保存在bfcache中；當(dāng)用戶點(diǎn)擊后退按鈕時(shí)，會(huì)從bfcache中獲取上一級(jí)的頁面，加快頁面的轉(zhuǎn)換速度和減少網(wǎng)絡(luò)請(qǐng)求時(shí)間。

bfcache的出現(xiàn)導(dǎo)致了頁面不刷新的問題，如下：
在A頁面點(diǎn)擊“去完成”時(shí)跳轉(zhuǎn)到B頁面，完成任務(wù)之后在B頁面點(diǎn)擊回退按鈕，退回到A頁面。這個(gè)時(shí)候A頁面的“去完成”按鈕理應(yīng)會(huì)變成“已完成”，但是因?yàn)锳頁面跳轉(zhuǎn)B頁面的時(shí)候，A頁面的數(shù)據(jù)（DOM和js狀態(tài)）存在了bfcache中，所以從B跳轉(zhuǎn)到A頁面時(shí)，A頁面并不會(huì)刷新，按鈕不會(huì)變成“已完成”。

往返緩存_圖解.jpg

筆記整理記錄