更新时间:2022-06-17 22:09:22
你的Facebook的动态消息中充满着一些关于你朋友、家人以及你所爱的人的照片,也许你会想要在手机上也能重温那些场景。我们一直在寻找提升用户体验的方式,包括更优秀和更快的移动端体验。为了达到这个目标,我们团队仔细研究了如何在 iOS 设备上更好更快得显示照片并最终找到了一种方法,能够让 Facebook for iOS 的数据开销降低10%,同时将照片加载显示的速度提升了15%。接下来的内容是讲述我们如何做到这一点的。
到目前为止, Facebook for iOS 是根据如下步骤加载你动态消息中照片:
渐进式图片 Progressive JEPG(简称为 PJEPG )是一种储存多个独立“扫描”的图片格式。并且图片的精度会随着扫描的次数增加,变的越来越清晰。当所有的扫描版本叠加之后,一张最高精度的图片就会被显示出来。第一次的扫描能给予用户第一个低质量的缩略图。之后的每一层扫描都会使得这张图片的精度上升一个等级。当图片以PJPEG的格式被下载的时候,一旦第一层扫描结束我们可以马上在手机上为用户显示缩略图。当之后的扫描被下载后,我们会更新图片到一个更好的质量。
浏览器对于PJEPG格式图片的支持在2010的时候就已经非常流行了。并且我们采用PJEPG作为图片格式已经有一段时间了。然而,手机端的应用们似乎还没赶上这个潮流。举个例子, iOS 端上还没有渐进式处理图片的支持,所以我们不得不为在 iOS 上的 Facebook 开发新的方式来做到这一点。
在 Facebook for iOS 中采用渐进式的图片渲染有如下一些好处:
然而使用 PJPEG 的图片有一个缺点:下载并渲染多个扫描层会占用更多 CPU 的资源。即使解码这些图片可以在后台处理,但是这个进程对于 CPU 来说还是非常繁重。对于我们来说,问题在于在数据占用,网络延迟和CPU的利用率上找到一个平衡点。比如说我们曾经考虑使用WebP 从文件大小的角度来说,WebP和JPEG相比,在某些情况下是更优的。但这种格式不支持渐进式的渲染。
下面这张图片很好的解释了我们在 iOS 端的 Facebook 上是如何下载图片的。下面的两张图片都表示下载一张图片的情况。 “Wait Time” 表示了从显示一张图片的占位符到加载出清晰能让人表示满意的图片所需要的时间。即使当缩略图片已经显示了,许多用户还是不愿再等待全图的加载。
对于每一张图片,我们在三个不同的扫描层次上进行渲染。
结果就是用户们可以更快的看到一张棒棒的图片!
为了知道什么叫做一张令人满意的图片,我们尝试了不同的扫描层级,并最终找到了人们操作图片时涉及最多的那几个层级。我们同时也研究了不同扫描层级的图片与最终完整图片之间的相似度。我们的对比功能会获取两张图片并返还一个0到1之间的数字来表示他们的相似度。0是完全不像,1是完全一样。下面是一些测试的结果:
为了对比选择不同扫描分层深度所带来的影响,我们还做了个A/B 测试 然后对数据进行了核实。
在 Facebook ,我们仍然继续致力于减少用户等待的时间,并且这只是我们很多努力中的一小部分。即使采用PJPEG后,照片的加载速度已经变得很快了,但是我们知道还是有很多提升的空间来更好的提升用户体验。
很多人都在这个项目上花费了相当的时间;我们应当感谢Linji Yang, Miguel Cohnen, Kun Chen, Kirill Pugin, Edward Kandrot, Marty Greenia, Brian Cabral 和 Tomer Bar.