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 搜索屏幕從三層減為兩層。這給了小手機很多空間，給內容很多空間。 </ul>
- APK 將更小，這對小型網絡非常適合。神奇的是 Asset tinting（我從來沒聽說過的東西）。Asset tinting 意味著 assets，在這種情況下是圖像、可以以編程方式著色。例如，一個灰色的心可以通過編程方式變為紅色。
- 加載較少的 assets。這意味著 UI 顯示更快并且以更少的內存來存儲位圖。每個需要被顯示的 assets 必須以閃存的方式讀取并且解碼成一個位圖。越少這么做，App 就會越快。
- 更快的迭代時間。如果你想改變顏色或重新開發，你不需要一個設計師了，需要的事更改代碼和編譯。
- 結果：
- 在扁平化設計之前，需要 29 個不同的 assets 來顯示 feed screen。扁平化設計之后，只用了 8 個。僅憑這些，就在所有設備上減掉 120 ms 的冷啟動時間。
- 扁平化設計之后，整個 App 更快了。更少的 assets 被加載，整個 App 變得更靈巧，速度變得更快了。 </ul>
- 冷啟動時間是指應用程序啟動和響應的時間。目標就是讓應用程序啟動更快，讓用戶在低端手機上有一個好的體驗。
- 幾年前，在低端三星Y系列手機上 Instagram 的啟動時間是 3 秒，在高端三星 S5 上，啟動時間是 750 ms。
- 現在三星Y系列上 Instagram 啟動需要 1.5 秒。在三星 S5 上是 400 ms。 </ul>
- 找出是什么減慢了這個 App 的速度。
- 在 Android 上你可以使用 method tracing，以及 timing statements，兩者兼用會事半功倍。 </ul>
- 延遲加載。將項目從冷啟動路徑刪除。
- 重寫代碼。例如，緩慢的 JSON 解析代碼重寫后會更快。
- 遵從后臺線程。能在后臺完成的不要在 UI 線程上做。 </ul>
-
在后臺初始化單例模式，不要讓程序員必須檢查一個單例模式是否是可用的。
</li> - 在 UI 線程上創建足夠的對象，以便完善公共 API 功能。將功夫用到后臺線程上。緩存從磁盤存儲打開和閱讀，客戶端證書在后臺加載。Cookies 反序列化和解碼在后臺。通過這些改變，UI 將更快地出現在屏幕上。 </ul>
- Newsview，顯示你所有的喜好和評論，最初作為 webview 編寫。它需要在啟動時加載，以便盡可能快的顯示用戶數據。
- 問題是沒有控制 webview，它有它自己的堆棧和緩存系統。轉換到本地，需要 2 - 4 周。本地轉換后的冷啟動時間減少了 30%。 </ul>
- 快速冷啟動時間是可以實現的，通過配置、修復、迭代。
- 審慎使用像素。看看每一個屏幕不需要什么。其他國家用戶手機的屏幕顯著小于美國的。
- 移動手機喜歡簡單的設計，移動開發者也是如此，他們喜歡更簡單、更快的設計。 </ul>
為什么扁平化設計
改善冷啟動時間
怎么做？
1、配置 App。
2、修復最慢的部分。
3、迭代。再次啟動配置步驟。
4、App-wide 單例模式被發現是緩慢的。
5、很多重度單例模式先于 App 啟動：HTTP 客戶機、Cookie 存儲、圖像緩存、視頻緩存。真的不需要這些東西來顯示 UI 給用戶。它們可以并行地在后臺加載。
6、Two-part 延遲加載
7、Newsview 變慢。通過 method tracing 發現。
經驗
<span id="shareA4" class="fl">
</span>