Instagram工程师教你如何改善App的性能

　　英文原文： Instagram Improved Their App's Performance. Here's How. 

　　扁平化设计由于其简洁的外表，更少的按钮和选项使得界面干净整齐，从而减少认知障碍的产生。扁平化设计更是功能上的简化于与重组，相比于拟物化 而言，扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来。本文来自 Instagram 一名工程师的分享。

　　以下为译文：

　　扁平化设计仅仅只是一个漂亮的外表，还是一个性能利器，从而触发一场 UI 革命？实践证明是后者。

　　Tyler Kieft 是 Instagram 一名工程师，他详细解释了这其中的缘由，更详细的内容请关注他在@scale 会议上的演讲: 标准安卓手机上的 Instagram 。这个演讲是由 非死book 提供的，是“如何在实际情况下设计移动应用程序”系列的一部分，这里的“实际情况”是指那些手机速度更慢、屏幕更小、网络比美国更慢的地方。

　　为标准手机设计 App 和高端手机并不一样，Instagram 团队需要重新思考他们的设计。从 Tyler 的谈话中得到的启示之一是转变到扁平化设计，因为这将让应用程序更美观、更实用、并且还能大大提高性能。

　　这的确出乎我的意料，我曾经认为扁平化设计只是构建更美观的 UI。现在想想真是愚蠢之极。感谢 Tyler 如此详细的解释了扁平化设计的好处， Instagram 说明了一切。

　　扁平化设计是反拟物化，它采用简单的元素、简单的排版、单调的颜色以及简单的设计。

　　使用扁平化设计，Instagram 可以减少 120 ms 的冷启动时间，同时应用程序更美观、更好用、并且更专注将内容传送到不同大小的手机上。

　　那么扁平化设计是如何实现的呢？

　　转变到扁平化设计

• 为了更专注性能，Instagram 重写他们的 UI。
• Instagram 在 2012 年发布 Android 版本时，只有 3 个人的团队，花了大约 4 个月完成。其中两个工程师，一个设计师。Android 版本使用了和 iOS 版本相同的设计。
• 使用的丰富的渐变特性和大量的 UI 元素。
• 过渡到扁平化设计后，产品更简单和更美观。没有更多的渐变，没有更多的阴影。
• 通过采用扁平化设计，他们得到的经验是：
• 扁平化设计使开发量更小，开发代码更快、更新产品更快，这对开发人员来说是个好消息。
• 扁平化设计带来的是性能的提升，不仅开发人员做的少，而且速度更快。
• 新 Android 版本的目标就是利用他们从 iOS7 扁平化设计中学习到的经验来重新设计：
• 让它更扁平、更快。这不是重写，导航模式并没有改变。
• 要有强烈的屏幕空间意识。用全新的眼光看待每一块屏幕，尽量让设计能更好地适应所有的屏幕尺寸。
• 让它更美观。这是 Instagram 团队所做一切的基础。
• 整体效果发生了显著的简化，那么发生了那些变化呢？
• 去掉所有的渐变和光滑按钮。让图标回归鲜明的轮廓，取代渐变效果。保留纯色和扁平形状，以便 UI 融入背景。
• 去掉评论图标，使评论占据屏幕的全部宽度，给予评论更多的文本空间。屏幕上重点强调内容，让小屏幕手机用户有更多的空间来读正文内容。
• 拍照功能的重新布局。在小手机上，动作按钮设计在屏幕的顶部，而大屏幕手机所有的命令在底部。
• App 上不必要的 UI 全部去掉，让用户更多的关注内容。chrome 搜索屏幕从三层减为两层。这给了小手机很多空间，给内容很多空间。

　　为什么扁平化设计

• APK 将更小，这对小型网络非常适合。神奇的是 Asset tinting（我从来没听说过的东西）。Asset tinting 意味着 assets，在这种情况下是图像、可以以编程方式着色。例如，一个灰色的心可以通过编程方式变为红色。
• 加载较少的 assets。这意味着 UI 显示更快并且以更少的内存来存储位图。每个需要被显示的 assets 必须以闪存的方式读取并且解码成一个位图。越少这么做，App 就会越快。
• 更快的迭代时间。如果你想改变颜色或重新开发，你不需要一个设计师了，需要的事更改代码和编译。
• 结果：
• 在扁平化设计之前，需要 29 个不同的 assets 来显示 feed screen。扁平化设计之后，只用了 8 个。仅凭这些，就在所有设备上减掉 120 ms 的冷启动时间。
• 扁平化设计之后，整个 App 更快了。更少的 assets 被加载，整个 App 变得更灵巧，速度变得更快了。

　　改善冷启动时间

• 冷启动时间是指应用程序启动和响应的时间。目标就是让应用程序启动更快，让用户在低端手机上有一个好的体验。
• 几年前，在低端三星Y系列手机上 Instagram 的启动时间是 3 秒，在高端三星 S5 上，启动时间是 750 ms。
• 现在三星Y系列上 Instagram 启动需要 1.5 秒。在三星 S5 上是 400 ms。

　　怎么做？

　　1、配置 App。

• 找出是什么减慢了这个 App 的速度。
• 在 Android 上你可以使用 method tracing，以及 timing statements，两者兼用会事半功倍。

　　2、修复最慢的部分。

• 延迟加载。将项目从冷启动路径删除。
• 重写代码。例如，缓慢的 JSON 解析代码重写后会更快。
• 遵从后台线程。能在后台完成的不要在 UI 线程上做。

　　3、迭代。再次启动配置步骤。

　　4、App-wide 单例模式被发现是缓慢的。

　　5、很多重度单例模式先于 App 启动：HTTP 客户机、Cookie 存储、图像缓存、视频缓存。真的不需要这些东西来显示 UI 给用户。它们可以并行地在后台加载。

　　6、Two-part 延迟加载

• 在后台初始化单例模式，不要让程序员必须检查一个单例模式是否是可用的。

• 在 UI 线程上创建足够的对象，以便完善公共 API 功能。将功夫用到后台线程上。缓存从磁盘存储打开和阅读，客户端证书在后台加载。Cookies 反序列化和解码在后台。通过这些改变，UI 将更快地出现在屏幕上。

　　7、Newsview 变慢。通过 method tracing 发现。

• Newsview，显示你所有的喜好和评论，最初作为 webview 编写。它需要在启动时加载，以便尽可能快的显示用户数据。
• 问题是没有控制 webview，它有它自己的堆栈和缓存系统。转换到本地，需要 2 - 4 周。本地转换后的冷启动时间减少了 30%。

　　经验

• 快速冷启动时间是可以实现的，通过配置、修复、迭代。
• 审慎使用像素。看看每一个屏幕不需要什么。其他国家用户手机的屏幕显著小于美国的。
• 移动手机喜欢简单的设计，移动开发者也是如此，他们喜欢更简单、更快的设计。