[譯]React Native性能優(yōu)化指北
譯注： 本文并沒有詳細的介紹具體的性能優(yōu)化做法，作者給出的是一系列方法，需要我們自己根據(jù)實際情況，去采納有用的一些點。
原文鏈接： https://blog.usejournal.com/getting-started-optimizing-a-react-native-app-1d7507c2d849
過去這一年，我都在持續(xù)地對一個業(yè)務(wù)規(guī)模龐大的銀行APP進行性能優(yōu)化。到目前，我們成功的在一臺性能比較差的 華為P20 Lite 上，將 TTI 從14秒縮短到了2.5秒左右。下面是在這些性能優(yōu)化中，我們總結(jié)出來的一些經(jīng)驗。
0. 找出問題所在
在性能優(yōu)化過程中，一個常見的錯誤是，嘗試一次搞定所有的性能問題。正確的做法是，找到一臺性能比較差的Android機器，安裝你的APP，進行一系列完整的業(yè)務(wù)操作，去感受你的APP在低端Android機上的性能表現(xiàn)如何?？梢詥枂柲阕约海脩粲媚愕腁PP最常用的一些功能？哪些操作路徑，是關(guān)于用戶體驗的核心部分？
試試去掉所有動畫 —— 你的APP運行的怎么樣？
去掉網(wǎng)絡(luò)請求，再來渲染你的頁面 —— 你的APP還是慢嗎？
試試刪除某個組件 —— 頁面渲染時間有沒有顯著提升呢？
找出頁面渲染的所有相關(guān)邏輯，什么時候會執(zhí)行網(wǎng)絡(luò)請求，什么時候會渲染某些新的組件。只有當你找到導(dǎo)致APP性能問題的關(guān)鍵元素，你才有可能去修復(fù)它。
1. 性能測試，性能測試，還是性能測試
譯注： 作者還真是重要的事說三遍啊。
每次做性能優(yōu)化的時候，都需要測量你的某些改動，帶來的影響。具體怎么來測量呢？使用一個秒表，使用 react-native-debugger ，或者其他的第三方工具？在 react native 性能測試中，沒有銀彈，每個人遇到的問題可能千差萬別，因此，在你做出性能優(yōu)化的改動前后，進行可靠的性能數(shù)據(jù)測試，是至關(guān)重要的。
我之前寫過 另一篇長文來討論性能測試 ，如果你感興趣的話，你可以點過去看看 ??。
2. 可視化你的bundle大小組成
react-native-bundle-visualizer 是一個強大的工具，它可以用來分析你的bundle大小?？催@個包名也知道，這個工具會執(zhí)行react native 代碼的打包，將最終bundle的大小可視化，并且可以查看bundle的大小具體來自哪些部分，是我們頁面邏輯，還是來自 node_modules 。你可以看下，有沒有一些文件或者npm包，占據(jù)了特別比較大的文件大小。你真的需要 moment.js 么，希望它不會占據(jù)你bundle大小的6%……
3. 只有當你用到的時候，才去加載對應(yīng)代碼/資源
只有當要用到某部分代碼的時候，才去加載對應(yīng)代碼
這是縮短APP首次啟動時間最有效方法之一。在react native 項目里，代碼懶加載超出了它本來應(yīng)有的復(fù)雜度，但是這絕對值得我們?nèi)プ?。通過代碼懶加載，我們的一個項目，即使在我們能找到的最慢的Android機器上，也將APP的啟動時間從14秒縮短到了4秒！
react native 官方性能優(yōu)化部分 是這方面最好的資源之一。
延遲加載非關(guān)鍵的數(shù)據(jù)
你可能在很大APP里都看到過這個技術(shù)，通常在頁面初始階段，請求渲染首屏依賴的數(shù)據(jù)，在首屏展示之后，才去加載剩余部分的頁面數(shù)據(jù)。這個視頻 詳細的講解了這個技術(shù)。
4. 優(yōu)化并且標準化圖片資源
在react native項目中，通過很小的成本去優(yōu)化靜態(tài)資源(通常是圖片)，就能獲得比較大的性能提升。
為什么呢？每個設(shè)計師到處PNG圖片的姿勢可能是不同的，當你和多個設(shè)計師合作的時候，他們導(dǎo)出PNG圖片的設(shè)置可能存在差異。
你可以使用一些軟件，比如 ImageOptim ，去優(yōu)化你的圖片大小，甚至將整個流程自動化，就像 這篇文章一樣 。
5. 善于利用感知性能
性能優(yōu)化，并不只是追求縮短代碼執(zhí)行時間，我們最終的目的，是讓用戶在使用APP的時候，感覺到流暢。感知性能優(yōu)化，是你能利用的一個技巧，來讓用戶感覺APP運行的很快、很流暢。有一些方式，比如 讓用戶停留在歡迎界面，直到JavaScript代碼加載完成 ，或者使用 react-native-shimmer ，都可以優(yōu)化用戶感知性能。
6. 盡可能的使用開源組件，并保持他們是最新版
在我工作過程中，我意識到了一個比較尷尬的事情，作為APP開發(fā)者，我們基本上不可能寫出比開源組件更好的代碼。成千上萬的開源軟件貢獻者、他們擁有的完整的測試設(shè)備以及開源作者的知識水平，大多數(shù)情況下，都遠遠超出了我們公司或者小組的成員。
在過去的兩年里，react native社區(qū)都在集中精力進行性能優(yōu)化，特別是核心團隊最近的幾次大的升級，在 0.59 版本升級 JSC ，在 0.60.2 版本發(fā)布了 Hermes 。
7. 重寫你的動畫
動畫卡頓，通常更容易讓用戶察覺到APP的性能問題。在JS線程執(zhí)行動畫，很容易引起性能問題，導(dǎo)致動畫的卡頓。相反，將動畫交給native線程來運行，能避免這個問題。大多數(shù)的動畫，都可以使用 Animated 并且設(shè)置 useNativeDriver:true 來實現(xiàn)。
8. 避免過早的優(yōu)化細節(jié)
譯注 ：作者應(yīng)該就是讓我們抓住問題的主要矛盾，先解決 二八原則 中的 80% 部分。
細小的點，通常不是引起APP性能問題的罪魁禍首。
9. 性能優(yōu)化：痛并快樂著
APP性能優(yōu)化需要持續(xù)的投入很多精力，這和APP架構(gòu)不太一樣——但是，性能優(yōu)化的過程，也讓我們有機會對react內(nèi)部的機制有了更好的理解。
希望你喜歡這篇文章 ??。
推薦閱讀
我強烈推薦 這個react native性能優(yōu)化的視頻 ，它非常實用，很容易結(jié)合我們實際情況進行實踐。react native 官方團隊的 react native性能優(yōu)化 非常值得學(xué)習(xí)。
