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中的微信頁面, 因此是不存在問題。html
關於瀏覽器前進/後退緩存(BF Cache)問題詳細參考:http://harttle.land/2017/03/12/backward-forward-cache.html