移動端H5頁面返回并刷新頁面BFcache的示例分析

這篇文章主要為大家展示了“移動端H5頁面返回并刷新頁面BFcache的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“移動端H5頁面返回并刷新頁面BFcache的示例分析”這篇文章吧。

憑借整站使用H5開發(fā)的創(chuàng)新體驗、定制設計、設計團隊積累與透明式的服務過程,符合行業(yè)特點，專屬顧問根據(jù)企業(yè)產品，消費群體屬性，準確定位；設計師以目標客戶為中心，以突出品牌官網(wǎng)特性為宗旨，定制專屬網(wǎng)站建設設計方案。

項目中的需求：

點擊瀏覽器中的返回按鈕，要讓頁面重新加載資源。因為這部分的資源每次去加載的內容都不一樣，如果返回的時候，還是看到原先的內容，那做這個內容塊的意義就很小了；而如果用戶看完了這部分內容，再返回來的時候，這個地方換成了新的內容，這樣就能體現(xiàn)這部分的價值了。

而對于瀏覽器來說，大部分瀏覽器的返回是直接使用緩存的，不會執(zhí)行任何的javascript代碼。原因：部分瀏覽器在后退時不會觸發(fā)onload事件，這是HTML5世代瀏覽器新增的特性之一——Back-Forward Cache(簡稱bfcache)

什么是bfcache？

bfcache，即back-forward cache，可稱為“往返緩存”，可以在用戶使用瀏覽器的“后退”和“前進”按鈕時加快頁面的轉換速度。這個緩存不僅保存頁面數(shù)據(jù)，還保存了DOM和JS的狀態(tài)，實際上是將整個頁面都保存在內存里。如果頁面位于bfcache中，那么再次打開該頁面就不會觸發(fā)onload事件

pageshow事件

這個事件在用戶瀏覽網(wǎng)頁時觸發(fā)，pageshow 事件類似于 onload 事件，onload 事件在頁面第一次加載時觸發(fā)， pageshow 事件在每次加載頁面時觸發(fā)，即 onload 事件在頁面從瀏覽器緩存中讀取時不觸發(fā)。

pagehide事件

該事件會在用戶離開網(wǎng)頁時觸發(fā)。離開網(wǎng)頁有多種方式。如點擊一個鏈接，刷新頁面，提交表單，關閉瀏覽器等。pagehide 事件有時可以替代 unload事件，但 unload 事件觸發(fā)后無法緩存頁面。

persisted屬性

pageshow事件和pagehide事件的event對象還包含一個名為persisted的布爾值屬性。

對于pageshow事件，如果頁面是從bfcache中加載的，則這個屬性的值為true；否則，這個屬性的值為false。

對于pagehide事件，如果頁面在卸載之后被保存在bfcache中，則這個屬性的值為true；否則，這個屬性的值為false。

不同的瀏覽器在對當前窗口‘打開'歷史記錄中的前一個頁面的表現(xiàn)上并不統(tǒng)一，這和瀏覽器的實現(xiàn)以及頁面本身的設置有關系。

解決方案：

javascript監(jiān)聽pageshow事件阻止頁面進入bfcache

window.addEventListener('pageshow', function (e) {
if (e.persisted) {
window.location.reload()
}
})

在uc和微信中測試通過，但是在某些安卓手機自帶的瀏覽器中無效。

javascript監(jiān)聽pagehide事件阻止頁面進入bfcache

window.addEventListener('pagehide', function (e) {
 var dom = document.body;
 dom.children.remove();
 setTimeout(function () {
  dom.appendChild("<script type='text/javascript'>window.location.reload();<\/script>");
 });
});

設置meta標簽，清除頁面緩存

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

Cache-Control指定請求和響應遵循的緩存機制。在請求消息或響應消息中設置Cache-Control并不會修改另一個消息處理過程中的緩存處理過程。請求時的緩存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，響應消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各個消息中的指令含義如下

  • Public指示響應可被任何緩存區(qū)緩存

  • Private指示對于單個用戶的整個或部分響應消息，不能被共享緩存處理。這允許服務器僅僅描述當用戶的部分響應消息，此響應消息對于其他用戶的請求無效

  • no-cache指示請求或響應消息不能緩存

  • no-store用于防止重要的信息被無意的發(fā)布。在請求消息中發(fā)送將使得請求和響應消息都不使用緩存。

  • max-age指示客戶機可以接收生存期不大于指定時間（以秒為單位）的響應

  • min-fresh指示客戶機可以接收響應時間小于當前時間加上指定時間的響應

  • max-stale指示客戶機可以接收超出超時期間的響應消息。如果指定max-stale消息的值，那么客戶機可以接收超出超時期指定值之內的響應消息。

注：有些情況下設置清除緩存也沒有起到作用，我自己做的這個h6頁面就沒有起到效果。具體情況還是要具體分析。

我遇到的情況：

<div class="content">
<iframe id="iframe" src="https://cpu.baidu.com/xx/xx/xxx" frameborder="no" scrolling="no"></iframe>
</div>

這個iframe中的地址每次刷新頁面都會有不同的內容推送給用戶。進入iframe中的內容之后，按返回按鈕返回來想進行頁面自動刷新，為的就是讓用戶看到新的內容。

做法：

使用pageshow進行整個頁面刷新

window.addEventListener('pageshow', function (e) {
if (e.persisted) {
window.location.reload()
}
})

這樣可以實現(xiàn)。

后面又覺得不妥，沒有因為這個小部分而進行整個頁面刷新，想到了另一種思路：因為這個iframe中的內容是動態(tài)的，可以對其進行定時器設置，如下：

let iframe = document.getElementById('iframe')
setInterval(() => {
iframe.setAttribute("src", "https://cpu.baidu.com/xx/xx/xx");
},15000)

這樣也可以實現(xiàn)自己的功能。

最后可以結合一下：

let iframe = document.getElementById('iframe')
window.addEventListener('pageshow', function (e) {
 if (e.persisted) {
  iframe.setAttribute("src", "https://cpu.baidu.com/xx/xx/xx");
 }
})

這樣做也有好處，可以避免使用定時器，對網(wǎng)頁的性能也是比較好。但是這個方法在返回的時候，可以看到iframe里面內容的重新加載，會有一個時間間隙。

以上是“移動端H5頁面返回并刷新頁面BFcache的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：移動端H5頁面返回并刷新頁面BFcache的示例分析
標題網(wǎng)址：http://bm7419.com/article22/igdhjc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、網(wǎng)站制作、微信小程序、網(wǎng)站改版、做網(wǎng)站、手機網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設計