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)問題詳細參考:http://harttle.land/2017/03/12/backward-forward-cache.html