Mobile Safari Page Auto Refresh Limitation

by hothero

最近有個客戶告知網站在手機看會一直自己重新整理，後續追蹤才發現是 safari，而非所有瀏覽器都會。

當時從幾個方向找：

  1. 會不會是 vuejs 的關係？
  2. 會不會是 vuejs 的套件，像是 vue-route 的關係？
  3. 後端伺服器 node.js 的關係？
  4. 還是安裝的第三方套件的關係，像是 optimizely？

在確認都非開發端的問題後，合理懷疑是 safari 的關係，進而找到，原來 safari 有其可瀏覽網頁的限制！

MobileSafari keeps website cache only in RAM, and therefore, once it runs out of RAM, it'll automatically destroy an entire page, forcing the refresh, disguising itself as an auto-refresh feature. You can only keep at most 3 pages open at any time... Even the iPhone 4 with double the amount of RAM can only keep 5 pages.

據官方說明，因為 safari 為加速是把 cache 放在 RAM 中，其實在扣除掉日常 app 與背景程序的運作下，本來就沒太多空間給瀏覽器使用。至於具體可用上限是多少，目前還未找到資料，希望有人可以分享！

在確定有此可能性後，回去看該頁面，果然！內文的圖片都是超過 4000 pixel 以上，甚至有看到破 6000 的數字...大約有 20 張照片。後續在將圖片都縮小後，就正常囉！

後記：有人問說為什麼明明呈現是 800x600 呀，為什麼這麼大？基本上你看得到的內容跟瀏覽器讀了什麼東西是兩回事，不然要 HTML/CSS 跟工程師幹嘛呢 XDD

以此例來說，實際被瀏覽器 cache 的圖片大小辨識 4031x3024 這麼大張。

參考資料