2020-04-29 记一次让小兔子抓狂的gif踩坑事件

• 拼多多社招H5 - IOS系统下gif问题踩坑记录。
  线上地址：https://m.pinduoduozp.com/social

问题描述：H5跳转到拉勾第三方网站，后退返回H5以后，发现iphone对gif停止播放，并且图片会随机消失（不止是gif消失，普普通通png也会）。

普通png消失了
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也就不再复现……

来自美丽的HR小姐姐

拓展阅读：

• 《通过HTML5 Video来优化动态GIF》

摘要：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>

• 《浏览器前进/后退缓存（BF Cache）》

摘要：浏览器在前进后退过程中， 会应用更强的缓存策略，表现为 DOM、window、甚至 JavaScript 对象被缓存，以及同步 XHR 也被缓存。 这一现象在移动端浏览器尤为常见。
会话（Session）中的某一个页面显示/隐藏时，会触发 pagehide 和 pageshow 事件。 这两个事件都有一个 persisted 属性用来指示当前页面是否被 BF Cache 缓存。 因此可以通过 persisted 属性来达到禁用 BF Cache 的效果