5.2 优化产品性能
在激烈的市场竞争中,即便产品具备基本的可用性和传播上的噱头,如果某些性能指标存在瓶颈,也会令用户疏远。亚马逊的统计数据就表明,网站的打开时间每多延迟 100 毫秒,就意味着多造成了 100 万美元的营收损失。
有的开发者抱着侥幸心理,猜测自己糟糕的代码逻辑处于黑箱之中,用户在前台使用并不会觉察到。殊不知,如今在用户电脑、手机里有各种安全与性能优化工具,它们对每一款安装到系统中的产品均有记录,能检测、比较产品的性能指标,并且给用户卸载建议。如果一款应用的耗电量较大、CPU 占用过高,或是请求了不必要的权限,都会在用户眼前暴露无遗,被列入黑名单乃至惨遭遗弃。因此产品的性能优化应当从一开始就纳入考量,建立良好的框架结构,并在后续持续维护、迭代改善。
某手机助手罗列出用户手机中的耗电应用排行
作为世界上最大的社交网络,Facebook 的移动客户端就面临着全球最为严酷的考验——需要全方位应对不同地理位置、网络环境、设备型号以及使用习惯的用户,确保绝大多数人都能正常使用。尤其是发展中国家,由于基础设施铺设和经济社会因素的影响,相比发达国家可谓是“重灾区”,需要重点盯防。为此,2013 年 Facebook 的增长黑客协同安卓产品经理、研发工程师共同奔赴非洲,亲身体验了一把当地的产品使用情况,以此深入寻求优化的方向。
体验的结果令他们印象深刻。当地网络环境极为糟糕,应用连接不时中断;人们所用的安卓设备内存小,导致应用加载缓慢且极易崩溃;每月的手机上网流量也捉襟见肘,通常 40 分钟就用完了。这些情况在遍布城市 Wi-Fi 热点的美国简直难以想象。
非洲的智能手机用户,图片来源:搜狐 IT
为此,Facebook 产品团队采用了下面这些优化策略。
1.单核的安卓手机启动应用尤其缓慢,这是因为启动过程中需要并行初始化多个模块。于是他们在单核手机上将这些初始化过程移到了启动完毕之后,甚至让某些模块只在即将被用到时才开始初始化。这一改动让应用的启动时间减少了 50%。
2.在网络顺畅的时候预加载未来可能用到的数据,以便在网络突然变得糟糕时,用户能尽可能多地获得离线内容。
3.为了应对上网流量昂贵的问题,让用户安心享受拍照功能,他们调研了众多的图片格式,并最终选择了 WebP 格式。原因很简单,WebP 格式同样是由安卓系统的开发公司 Google 推出的,二者在生态上兼容良好,压缩效率极高,相对于网页常用的 JPG 格式图片而言,流量节省了 25%至 35%,比 PNG 更是节省了将近 80%。最重要的是,图片品质没有明显的改变。
4.原本 Facebook 的应用会统一加载最大分辨率的图片,这是为了让用户可以自由地缩放。后来经过改进,会优先加载适合当前手机分辨率的图片,只在需要时(比如用户点击查看完整大图)才从服务器获取最高分辨率的图片,并且该用缓存时就决不发起额外的请求。上述两项改动让图片加载慢或失败的反馈减少了 90%。
5.用户的手机空间太小,直接导致了升级时下载安装包受阻,这批用户将继续停留在老版本,无法享受因升级带来的全新体验。于是工程师们开发了一个工具,能够自动计算出每个产品特性会让安装包的体积增大多少,以此在不同的安卓设备上做出功能取舍,推送不同的安装包。经过优化之后,文件大小减少了 65%。
这趟令人大开眼界的非洲之旅让 Facebook 的开发者们彻底认识到了移动应用的性能、处理数据的策略、网络的可靠性,以及根据使用场景做出智能判断,对在发展中国家谋取增长的重要性。
无独有偶,Instagram 的研发工程师泰勒·凯福特(Tyler Kieft)在一次会议演讲中,交流了他们改版安卓应用的心得。Instagram 在 2012 年由一个 3 人团队历时 4 个月完成安卓版本开发时,曾经使用的是和 iOS 版本相同的设计。丰富的渐变与大量的用户界面元素让产品显得精致美观。伴随 iOS 的发布,Instagram 也随之加入了“扁平化”的设计风潮,但这不是一次毫无意义的跟风,倒更像是借此契机进行了一次性能大改造。
1.扁平化设计有着更加简洁的视觉效果,没有多余的渐变和阴影,保留纯色和线形,这让设计和开发人员的工作量更少、代码开发和产品迭代速度更快。原本需要贴图实现的色彩效果,只需要通过资源着色(Asset Tinting)技术就能以编程的方式达成,例如将一颗灰色的心通过编程变成红色,而完全不必劳驾设计师。在扁平化之前,程序需要加载 29 个不同的资源文件来展示主界面,扁平化之后则只用到了 8 个,在所有设备上平均减少了 120 毫秒的启动时间。程序漏洞数量减少了,运行速度也有了显著提升。
2.重新布局界面,去除冗余的元素,让用户更多地关注内容。如将搜索的层级从三层减为两层,去掉评论图标以便使评论文本占据屏幕的全部宽度,在小屏幕手机上把常用操作按钮放在界面顶部而非大屏幕手机的底部。
3.兼用方法追踪(Method Tracing)和时点声明(Timing Statements)技术,将程序主体拆解成可以配置的模块,延迟加载不必要的模块(这点与 Facebook 是一致的),重写导致缓慢的部分。例如原本使用网页组件(WebView)显示的评论文本,有自己的堆栈和缓存机制,处理起来较为复杂迟缓,于是他们花费三周左右的时间将它改写为用原生的文本组件来显示,调用时间因此减少了 30%。加载 cookie、图像及视频缓存的这些“小动作”,也被偷偷隐藏到了用户无法感知到的程序后台。原先 Instagram 在三星的低端 Y 系列手机上的启动时间是 3 秒,在高端 S5 手机上的启动时间为 750 毫秒;优化后,这两个数字分别降到了 1.5 秒和 400 毫秒。
Instagram 扁平化前后的视觉效果对比
像这样审慎地进行每一像素的开发,宁可麻烦自己,也绝不拖累用户。抱着这样的觉悟和诚意去用心做产品,相信一定能让用户感受到。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论