- 拼多多社招H5 - IOS系统下gif问题踩坑记录。
线上地址：https://m.pinduoduozp.com/social
问题描述：H5跳转到拉勾第三方网站，后退返回H5以后，发现iphone对gif停止播放，并且图片会随机消失（不止是gif消失，普普通通png也会）。
猜测原因：
1. 存在BF Cache（浏览器前进/后退缓存），移动端浏览器尤为常见。
2. 苹果从来就不待见gif，觉得gif是耗内存的东西，它们推崇的是HTML5技术。
踩坑过程：一开始还是想着保留图片的，想让页面reload / forceupdate。因为首次进入页面的时候，gif总是一切正常。
尝试了以下失败方案😫：
1. 监听页面路由变化，给history push空的页面记录再后退实现reload
2. 监听pageShow事件，通过event.persisted判断页面是从服务器上载入，还是从缓存中读取并reload
3. 页面加载完毕后forceupdate图片
4. 图片改为background-image
然后想着那我放弃gif了好吧！
5. 把gif 转换成 html5 video，然后将视频控制栏隐藏，自动播放无限循环来模拟gif（其实这个方案在pc上真的很好用，twitter现在就是这么做的。但是iphone会自动全屏播放，因此放弃）
以上方法均无法完美解决，哎……心累了这个时候已经☹️。
怀疑人生怀疑智商怀疑职业发展怀疑一切甚至想去抽根烟静静……
总之感谢guli帮我分担了4个gif，而且鼓励我问题不大。感谢设计帮忙把每一个小元素分片切给我们。
最终解决：我们把所有文案切图换成了文字渲染，gif换成了css animation动画，这个页面再也没有gif了。
于是这个图片灵异消失的bug也就不再复现……
拓展阅读：
摘要：GIF图片通常具有较大的体积，就导致网页加载速度变慢，内存使用增加。通过使用HTML video，可以使浏览器中的GIF图片在减少98%体积的情况下，仍然具有相对较高的质量。
<video autoplay loop muted playsinline>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
<img src="animated.gif">
</video>
摘要：浏览器在前进后退过程中， 会应用更强的缓存策略，表现为 DOM、window、甚至 JavaScript 对象被缓存，以及同步 XHR 也被缓存。 这一现象在移动端浏览器尤为常见。
会话（Session）中的某一个页面显示/隐藏时，会触发pagehide和pageshow事件。 这两个事件都有一个persisted属性用来指示当前页面是否被 BF Cache 缓存。 因此可以通过persisted属性来达到禁用 BF Cache 的效果
