开发者社区> 玄学酱> 正文

Facebook iOS 应用是如何加速图片显示的?

简介: 本文讲的是Facebook iOS 应用是如何加速图片显示的?,你的Facebook的动态消息中充满着一些关于你朋友、家人以及你所爱的人的照片,也许你会想要在手机上也能重温那些场景。我们一直在寻找提升用户体验的方式,包括更优秀和更快的移动端体验。
+关注继续查看
本文讲的是Facebook iOS 应用是如何加速图片显示的?,

你的Facebook的动态消息中充满着一些关于你朋友、家人以及你所爱的人的照片,也许你会想要在手机上也能重温那些场景。我们一直在寻找提升用户体验的方式,包括更优秀和更快的移动端体验。为了达到这个目标,我们团队仔细研究了如何在 iOS 设备上更好更快得显示照片并最终找到了一种方法,能够让 Facebook for iOS 的数据开销降低10%,同时将照片加载显示的速度提升了15%。接下来的内容是讲述我们如何做到这一点的。

过去图片是如何被处理的

到目前为止, Facebook for iOS 是根据如下步骤加载你动态消息中照片:

  • 我们先拿到这个图片的所有链接,然后根据这个链接来下载格式为JPEG的照片数据。
  • 至少两个版本的图片被同时请求,这包括一张缩略图和一张全尺寸的图片。一旦小的缩略图下载好之后,我们会先显示小的缩略图直到更高精度的图片能被用于展示。
  • 有时候,我们会根据不同的尺寸将同一张图片下载多次。具体的尺寸是根据设备的型号以及图片在 app 中出现的场景来定义(比如在动态消息当中或者是全屏的 photo viewer )
  • 因为我们对于同一个图片下载了多个尺寸的版本,所以这些不同尺寸的图片都会被储存在设备的闪存中

渐进式图片

渐进式图片 Progressive JEPG(简称为 PJEPG )是一种储存多个独立“扫描”的图片格式。并且图片的精度会随着扫描的次数增加,变的越来越清晰。当所有的扫描版本叠加之后,一张最高精度的图片就会被显示出来。第一次的扫描能给予用户第一个低质量的缩略图。之后的每一层扫描都会使得这张图片的精度上升一个等级。当图片以PJPEG的格式被下载的时候,一旦第一层扫描结束我们可以马上在手机上为用户显示缩略图。当之后的扫描被下载后,我们会更新图片到一个更好的质量。

浏览器对于PJEPG格式图片的支持在2010的时候就已经非常流行了。并且我们采用PJEPG作为图片格式已经有一段时间了。然而,手机端的应用们似乎还没赶上这个潮流。举个例子, iOS 端上还没有渐进式处理图片的支持,所以我们不得不为在 iOS 上的 Facebook 开发新的方式来做到这一点。

在 Facebook 的 iOS 客户端上用渐进式图片

在 Facebook for iOS 中采用渐进式的图片渲染有如下一些好处:

  1. 数据消耗:PJPEG使得我们可以避免下载小尺寸的图片。
  2. 网络连接:因为我们不再需要下载缩略图,我们现在每张图片只需要用到一个数据连接来代替过去使用多个数据连接来下载同一张图片。
  3. 硬盘储存:使用PJPEG来储存图片减少了应用对于硬盘的占用。
  4. 一个URL:因为我们不再需要根据不同的尺寸来多次下载图片,所以我们可以用相同的URL标识资源。

然而使用 PJPEG 的图片有一个缺点:下载并渲染多个扫描层会占用更多 CPU 的资源。即使解码这些图片可以在后台处理,但是这个进程对于 CPU 来说还是非常繁重。对于我们来说,问题在于在数据占用,网络延迟和CPU的利用率上找到一个平衡点。比如说我们曾经考虑使用WebP 从文件大小的角度来说,WebP和JPEG相比,在某些情况下是更优的。但这种格式不支持渐进式的渲染。

等待图片加载

下面这张图片很好的解释了我们在 iOS 端的 Facebook 上是如何下载图片的。下面的两张图片都表示下载一张图片的情况。 “Wait Time” 表示了从显示一张图片的占位符到加载出清晰能让人表示满意的图片所需要的时间。即使当缩略图片已经显示了,许多用户还是不愿再等待全图的加载。 

当我们使用PJPEG的图片的时候: 

对于每一张图片,我们在三个不同的扫描层次上进行渲染。

  1. 首先,我们渲染一张能够满足预览效果的图片,这一步是像素化的过程。
  2. 然后,我们渲染出一张肉眼看上去还不错的图片。事实上,它看上去几乎就是完美的。
  3. 最后我们渲染出一张最高质量的图片:达到最高分辨率的一张图。

结果就是用户们可以更快的看到一张棒棒的图片!

如何找到正确的扫描分层程度

为了知道什么叫做一张令人满意的图片,我们尝试了不同的扫描层级,并最终找到了人们操作图片时涉及最多的那几个层级。我们同时也研究了不同扫描层级的图片与最终完整图片之间的相似度。我们的对比功能会获取两张图片并返还一个0到1之间的数字来表示他们的相似度。0是完全不像,1是完全一样。下面是一些测试的结果:

为了对比选择不同扫描分层深度所带来的影响,我们还做了个A/B 测试 然后对数据进行了核实。

取得的成果

  1. 在 iOS 端上的 Facebook 采用PJPEG后数据占用减少了10%。
  2. 在用了用PJPEG之后,我们将加载一张令用户满意的图片的速度提高了15%左右。新的图片和原来的全精度图片相比几乎没有区别。
  3. 采用PJEPG帮助我们提高了预览图的加载速度。通过这种方式,虽然 CPU 比以前多用了一点资源,但是我们大大减少了需要下载一张图片的时间。

在 Facebook ,我们仍然继续致力于减少用户等待的时间,并且这只是我们很多努力中的一小部分。即使采用PJPEG后,照片的加载速度已经变得很快了,但是我们知道还是有很多提升的空间来更好的提升用户体验。

很多人都在这个项目上花费了相当的时间;我们应当感谢Linji Yang, Miguel Cohnen, Kun Chen, Kirill Pugin, Edward Kandrot, Marty Greenia, Brian Cabral 和 Tomer Bar.





原文发布时间为:2016年04月20日

本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云推出全球应用加速解决方案,快速提升跨域应用访问体验
近日,阿里云全球加速产品推出全球应用加速等多个新特性,融合云安全DDoS高防与WAF的安全防护能力,结合云解析智能DNS与GTM全局流量调度,保障企业全球应用部署的高质量、高安全、高可靠。另外邀请到在线互联网教育机构—豌豆思维,进一步分享了他们使用全球加速的经验。
703 0
iOS音频播放器锁屏歌词显示与性能优化
iOS音频播放器锁屏歌词显示与性能优化
50 0
EMR Spark Relational Cache 利用数据预组织加速查询
本文介绍了EMR Spark的Relational Cache如何从数据量较大的Cube中快速提取出所需数据加速查询的原理。通过列式存储、文件索引、Z-Order等技术,我们可以快速过滤数据,大大减少实际发生的IO数据量,避免IO瓶颈的出现,从而优化整体查询性能。
991 0
Android图形显示系统——下层显示4:图层合成上(合成原理与3D合成)
Android显示之图层合成 要点 1.图层合成指综合各个窗口的绘制内容,送往LCD显示的过程。从原理上可分为在线合成与离线合成两种方式。 2.在Android的SurfaceFlinger代码流程中,图层合成方式分3D合成(OpenGL)和硬件合成两大类。 3.图形系统采用垂直同步Vsync机制,由LCD上报vsync,触发图层合成。 图层合成的原理
4861 0
Word图片显示不完整
    选中图片和上下文字,段落里选择单倍行距,其他行距不行。
474 0
【云栖大会】AliOS加速汽车操作系统普及 东风雪铁龙首款智联网汽车将搭载AliOS
在过去一年时间里,阿里巴巴与上汽的合作非常成功,上汽自主品牌新车全线搭载了AliOS操作系统,陆续推出了近十款新车。超过25万辆智联网汽车行驶在道路上,正在改变汽车出行。
3079 0
【转载】区块链应用加速到来 “群雄逐鹿赛”看点在哪?
9月26日,2019杭州云栖大会的第二天,蚂蚁金服副总裁蒋国飞在区块链分论坛上指出,区块链将构建信任机制的基础设施,未来,上链量将成衡量数字经济水平的重要指标。于此同时,他还预测一年内,将出现一批千万日活的区块链应用。
1144 0
Android图形显示系统——下层显示4:图层合成下(硬件合成器)
硬件合成器-HwComposer 使用3D合成,需要大面积的像素混合计算和大量的内存传输(GPU读写GraphicBuffer所需),对GPU和DDR来说是一个巨大的负担。在GPU/DDR重度使用的场景(比如玩游戏),会造成发热、卡顿等。 为了提升性能,减少功耗,可以将合成这个过程交由另一个芯片完成,减轻GPU负担。进一步,直接让这个芯片连LCD,在LCD需要显示某一行时
5512 0
Android图形显示系统——下层显示3:窗口系统
Android之窗口系统 要点 1.Android窗口系统通过C-S架构和一套Buffer循环机制实现,在保证安全稳定的前提下基本上做到了极致性能(无大块内存拷贝,IPC通信内容最少)。 2.SurfaceFlinger创建Layer,将其中的BufferQueueProducer作为IGraphicBufferProducer传给应用侧的Surface,因而构成窗
5920 0
+关注
玄学酱
这个时候,玄酱是不是应该说点什么...
20709
文章
438
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载