# Instagram 提高了其應用程序的性能。 這是如何做。 > 原文： [http://highscalability.com/blog/2014/9/29/instagram-improved-their-apps-performance-heres-how.html](http://highscalability.com/blog/2014/9/29/instagram-improved-their-apps-performance-heres-how.html)  [平面設計](http://en.wikipedia.org/wiki/Flat_UI_Design)只是另一張漂亮的面孔，還是作為 UI 革命掩蓋的巨大性能突破？ 事實證明，扁平化設計是贏得冷戰的堅石。 Instagram 工程師 [Tyler Kieft](http://tylerkieft.com/) 在他在 [@scale 會議](http://atscaleconference.com/)上發表的簡短且內容豐富的演講中，對上述內容進行了詳盡的解釋：[在典型 Android](https://www.youtube.com/watch?v=GHTO2WKDO6I#t=8927) 上的 Instagram ]。 該演講是[系列演講](/blog/2014/9/22/how-facebook-makes-mobile-work-at-scale-for-all-phones-on-al.html)的一部分，該演講由 Facebook 進行，主題是如何為全球范圍內的移動應用程序設計現實，與美國相比，這種手機的速度較慢，屏幕較小，網絡速度較慢。 。 為典型的手機而不是高端手機進行設計需要 Instagram 團隊深入思考其設計。 泰勒（Tyler）演講的啟示之一是**向平面設計**的轉移極大地提高了應用程序的美觀性，可用性和實用性，并且極大地提高了性能。 這真是一個驚喜。 我只是將平面設計視為思考如何構建漂亮的 UI 的一種方式。 傻我 感謝泰勒（Tyler）如此清晰，有力地解釋了平面設計的好處，并使用 Instagram 作為可能的典范。 平面設計是反擬態的，它是數字化本地人，避免了對現實外觀的癡迷，采用簡單的元素，簡單的版式，平面顏色和簡單的設計。 使用平面設計，Instagram 可以從冷啟動時間縮短 120 毫秒。 它還能夠將顯示提要屏幕所需的資產數量從 29 個減少到 8 個。 同時，使應用程序更美觀，更易用，并更加關注不同手機尺寸的內容。 平面設計如何使這一切成為可能？ ## 轉向平面設計 * Instagram 改寫了他們的 UI，以專注于 Android 上提供的各種 UI 的更好性能。 * Instagram 于 2012 年在 Android 上發布時，它是由 3 個人在大約 4 個月內建成的。 兩名工程師和一名設計師。 Android 版本使用與 iOS 版本相同的設計。 * 該設計使用了甜美的漸變色和許多 UI 元素。 * 向 iOS7 過渡到平面設計，使產品變得更加簡單和美觀。 沒有更多的漸變。 拿出箱子。 沒有更多的陰影。 * 他們從適應平面設計**的經驗中學到了**： * **平面設計是減少**，更快開發代碼和更快交付產品的機會。 這對開發人員來說很棒。 * **平面設計的性能更高**。 開發人員不僅做得更少，而且手機在顯示 UI 方面也做得更少。 * 使用從 iOS7 平面設計重新設計中學到的新 Android 版本的目標： * **使其平坦，使其更快**。 這不是重寫。 導航模式沒有改變。 * **注意屏幕空間**。 重新瀏覽每個屏幕，并弄清楚如何更好地適應所有屏幕尺寸。 * **變得漂亮**。 這是他們在 Instagram 上所做的一切的基礎。 * 總體效果是極大的簡化。 進行了哪些更改？ * **將所有內容從 Chrome** 中刪除。 拿出所有漸變和光澤按鈕。 去勾勒形狀而不是圖標的漸變按鈕。 剩下的是純色和扁平形狀。 希望用戶界面淡入背景。 * **拿出注釋圖標**，使注釋全屏顯示，為注釋文本留出更多空間。 使內容在屏幕上脫穎而出。 用戶界面越少，使用小屏幕的人就有更多的空間閱讀文本。 * **分叉了用于拍照的手機布局**。 在小型電話上，他們使用在屏幕頂部帶有動作按鈕的設計。 對于較大的屏幕，所有命令都在底部。 * **刪除了整個應用程序不必要的 UI，以使內容更加集中**。 搜索屏幕上的三層鉻減少到兩層。 這在小型電話上騰出了很多空間。 由于三星 Galaxy 的按鈕纖薄，采用扁平化設計很容易以編程方式進行操作，從而為內容騰出了很多空間。 * 請注意，演講中有很多關于不同設計的精美圖片，因此非常值得觀看之前和之后的圖片。 ## 為什么要進行平面設計？ * **使用資產著色**運送更少的資產。 這意味著 APK 的大小較小，這在小型網絡上非常有用。 魔術是**資產著色** **（**我以前從未聽說過）。 [資產著色](http://blog.danlew.net/2014/08/18/fast-android-asset-theming-with-colorfilter/)表示資產（在這種情況下為圖像）可以通過程序進行著色。 例如，可以通過編程方式將灰色的心臟染成紅色。 資產著色意味著需要運輸的資產更少。 傳統上，每種按鈕狀態（按下，未按下，選擇等）都需要單獨的圖像。通過著色，可以將不同狀態的所有圖像都不再需要運送了。 僅需要圖像，并且可以設置不同的狀態。 * **加載更少的資產**。 這意味著 UI 顯示速度更快，并且用于存儲位圖的內存更少。 必須從閃存中讀取每個需要顯示的資產，并將其解碼為位圖。 完成的次數越少，應用程序變得越快。 * **更快的迭代時間**。 如果您要更改顏色或進行新開發，則不再需要設計師。 只需更改代碼并重新編譯即可。 * 結果： * **在進行平面設計之前，需要 29 種不同的資源來顯示供稿屏幕**。 平面設計后， **8 個資產**顯示同一頁面。 僅需要形狀即可顯示圖標和徽標。 其他所有內容均以代碼形式繪制為純色和矩形。 僅僅是從所有設備的冷啟動時間起將**縮短了 120ms** 。 * **采用扁平化設計，整個應用變得更快**。 每個屏幕的工作量都減少了。 更少的資產被加載，整個應用變得更加生氣。 評論中的用戶評論了應用程序在重新設計后的感覺。 人們真的很喜歡它。 人們贊賞與平臺匹配的設計所帶來的速度提升。 ## 縮短冷啟動時間 * 冷啟動時間是應用程序啟動并變得響應所需的時間。 從點擊圖標到在應用程序周圍單擊，它均有效。 我們的目標是讓**應用能夠超快速地啟動**，以便使用低端手機的用戶擁有豐富的體驗。 * 幾年前，在低端 Galaxy Y 上，Instagram 的啟動時間為 3 秒。 在高端 Galaxy S5 上，啟動時間為 750 毫秒。 * 現在，在 Galaxy Y 上，Instagram 需要 1.5 秒才能啟動。 在 Galaxy S5 上，需要花費 **400 毫秒**。 * 怎么樣？ （除去資產） * **對應用程序**進行配置。 * 找出導致應用速度下降的原因。 * 在 Android 上，您可以使用**方法跟蹤**，并且可以在代碼中放置計時語句。 方法跟蹤數較小的方法。 **時序聲明**是墻上時鐘時間，而不是機器時間。 同時使用這兩種功能可以讓您對緩慢的情況有良好的感覺。 * **解決最慢的問題**。 * **延遲加載**。 從冷啟動路徑中刪除項目。 * **重寫慢速代碼**。 例如，慢速 JSON 解析代碼被重寫為更快。 * **延遲到后臺線程**。 不要在 UI 線程中執行操作，而可以在后臺執行。 * **迭代**。 再次開始配置文件步驟。 * **應用范圍內的單身人士發現速度很慢**。 通過計時發現。 * 在應用啟動之前，已經啟動了許多**重單例**：HTTP 客戶端，Cookie 存儲，圖像緩存，視頻緩存。 確實不需要這些東西即可向用戶顯示用戶界面。 它們可以并行加載到后臺。 * **兩部分延遲加載** * 想要**在后臺**中初始化單例，但程序員仍將其視為始終可用于該應用的單例。 不想讓程序員必須檢查單例是否可用，因為那不是單例。 * **在 UI 線程**上創建足夠的對象，以便公共 API 完全起作用，并且可供程序員使用。 將艱苦的工作推遲到后臺線程。 對于高速緩存，這意味著打開和讀取磁盤存儲。 對于客戶端，證書將在后臺加載。 Cookies 在后臺反序列化和解碼。 通過這些更改，UI 可以更快地出現在屏幕上。 * **Newsview 運行緩慢**。 通過方法跟蹤找到。 * 新聞視圖最初顯示為網絡視圖，其中顯示了您的所有喜歡和評論。 需要在啟動時加載它以盡快向用戶顯示其數據。 * 問題是無法控制 Webview。 它具有自己的堆棧和緩存系統。 **將其轉換為本地**。 花了 2-4 周的時間。 原始轉換后，冷啟動時間將**降低了 30％**。 ## 得到教訓 * **可以實現快速的冷啟動時間**。 如果他們很快，他們甚至會變得更快。 剖析，修復，迭代。 * **謹慎使用像素**。 查看每個屏幕，查看不需要的內容。 與美國相比，其他國家/地區的用戶使用的手機要小得多。 * 移動電話喜歡簡單的設計，移動開發人員也喜歡。 這要容易得多，也要快得多。 ## 相關文章 * [在 Reddit 上](http://www.reddit.com/r/programming/comments/2iqfr7/how_instagram_improves_their_apps_performance/) * [Facebook 斥資 10 億美元收購 Instagram 架構](http://highscalability.com/blog/2012/4/9/the-instagram-architecture-facebook-bought-for-a-cool-billio.html) * [Instagram 體系結構更新：Instagram 有何新功能？](http://highscalability.com/blog/2012/4/16/instagram-architecture-update-whats-new-with-instagram.html) * [有人可以表達 Google 的材料設計與蘋果公司的平面設計嗎？](http://www.quora.com/Can-someone-articulate-Googles-material-design-vs-Apples-flat-design) 我發現有趣的是，這種平面設計運動是由 Microsoft 與 Windows Phone 一起發起的。 總是會有更多的高檔用戶界面（如游戲中），但從總體上看，功能正在取代形式。 我喜歡那個。 它以功能為基礎，對我有很多幫助。 直到觀看了這個出色的演示，我才知道平面設計是什么。 現在，在許多不同的層次上它變得更加有意義。 正如文章所提出的那樣，功能必須戰勝視覺障礙。 但是作為仍然使用 iOS6.1.3 的匕首，我必須要求您承認，自 iOS7 以來，奇怪而與眾不同的選擇令人困惑：白色文本的鮮綠色背景，窄字體，細膩的灰色陰影以及總體而言太多了 屏幕上呈鮮亮的白色，而對于發現此效果實際上令人痛苦的用戶則無能為力。 而且，即使使用 iOS8.0.2，提供的修改也是如此之小，以至于令人懷疑。 好吧，漸變對處理程序征稅-如果處理器不能比程序員領先一步，就消除漸變。 但是至少要為用戶提供背景顏色選項。 給一些真實的對比度控制。 為需要的人提供一些粗細的字體。 我們生活在一個這樣的世界中，所有用戶都將以正確的視線來到餐桌上，這一假設和期望越來越普遍。 但這是一個精英主義的假設。 使它精簡，使其快速，但不要把我們中的很多人甩在后面。