[譯]React Native性能優化指北

[譯]React Native性能優化指北

譯註： 本文並無詳細的介紹具體的性能優化作法，做者給出的是一系列方法，須要咱們本身根據實際狀況，去採納有用的一些點。

原文連接： blog.usejournal.com/getting-sta…

過去這一年，我都在持續地對一個業務規模龐大的銀行APP進行性能優化。到目前，咱們成功的在一臺性能比較差的 華爲P20 Lite 上，將 TTI 從14秒縮短到了2.5秒左右。下面是在這些性能優化中，咱們總結出來的一些經驗。

0. 找出問題所在

在性能優化過程當中，一個常見的錯誤是，嘗試一次搞定全部的性能問題。正確的作法是，找到一臺性能比較差的Android機器，安裝你的APP，進行一系列完整的業務操做，去感覺你的APP在低端Android機上的性能表現如何。能夠問問你本身，用戶用你的APP最經常使用的一些功能？哪些操做路徑，是關於用戶體驗的核心部分？

• 試試去掉全部動畫 —— 你的APP運行的怎麼樣？

• 去掉網絡請求，再來渲染你的頁面 —— 你的APP仍是慢嗎？

• 試試刪除某個組件 —— 頁面渲染時間有沒有顯著提高呢？

找出頁面渲染的全部相關邏輯，何時會執行網絡請求，何時會渲染某些新的組件。只有當你找到致使APP性能問題的關鍵元素，你纔有可能去修復它。

1. 性能測試，性能測試，仍是性能測試

譯註： 做者還真是重要的事說三遍啊。

每次作性能優化的時候，都須要測量你的某些改動，帶來的影響。具體怎麼來測量呢？使用一個秒錶，使用 react-native-debugger ，或者其餘的第三方工具？在 react native 性能測試中，沒有銀彈，每一個人遇到的問題可能千差萬別，所以，在你作出性能優化的改動先後，進行可靠的性能數據測試，是相當重要的。

我以前寫過 另外一篇長文來討論性能測試 ，若是你感興趣的話，你能夠點過去看看 🎉。

2. 可視化你的bundle大小組成

react-native-bundle-visualizer 是一個強大的工具，它能夠用來分析你的bundle大小。看這個包名也知道，這個工具會執行react native 代碼的打包，將最終bundle的大小可視化，而且能夠查看bundle的大小具體來自哪些部分，是咱們頁面邏輯，仍是來自 node_modules 。你能夠看下，有沒有一些文件或者npm包，佔據了特別比較大的文件大小。你真的須要 moment.js 麼，但願它不會佔據你bundle大小的6%……

3. 只有當你用到的時候，纔去加載對應代碼/資源

只有當要用到某部分代碼的時候，纔去加載對應代碼

這是縮短APP首次啓動時間最有效方法之一。在react native 項目裏，代碼懶加載超出了它原本應有的複雜度，可是這絕對值得咱們去作。經過代碼懶加載，咱們的一個項目，即便在咱們能找到的最慢的Android機器上，也將APP的啓動時間從14秒縮短到了4秒！

react native 官方性能優化部分 是這方面最好的資源之一。

延遲加載非關鍵的數據

你可能在很大APP裏都看到過這個技術，一般在頁面初始階段，請求渲染首屏依賴的數據，在首屏展現以後，纔去加載剩餘部分的頁面數據。這個視頻 詳細的講解了這個技術。

4. 優化而且標準化圖片資源

在react native項目中，經過很小的成本去優化靜態資源(一般是圖片)，就能得到比較大的性能提高。

爲何呢？每一個設計師處處PNG圖片的姿式多是不一樣的，當你和多個設計師合做的時候，他們導出PNG圖片的設置可能存在差別。

你可使用一些軟件，好比 ImageOptim ，去優化你的圖片大小，甚至將整個流程自動化，就像 這篇文章同樣 。

5. 善於利用感知性能

性能優化，並不僅是追求縮短代碼執行時間，咱們最終的目的，是讓用戶在使用APP的時候，感受到流暢。感知性能優化，是你能利用的一個技巧，來讓用戶感受APP運行的很快、很流暢。有一些方式，好比 讓用戶停留在歡迎界面，直到JavaScript代碼加載完成 ，或者使用 react-native-shimmer ，均可以優化用戶感知性能。

6. 儘量的使用開源組件，並保持他們是最新版

在我工做過程當中，我意識到了一個比較尷尬的事情，做爲APP開發者，咱們基本上不可能寫出比開源組件更好的代碼。成千上萬的開源軟件貢獻者、他們擁有的完整的測試設備以及開源做者的知識水平，大多數狀況下，都遠遠超出了咱們公司或者小組的成員。

在過去的兩年裏，react native社區都在集中精力進行性能優化，特別是核心團隊最近的幾回大的升級，在 0.59 版本升級 JSC ，在 0.60.2 版本發佈了 Hermes 。

7. 重寫你的動畫

動畫卡頓，一般更容易讓用戶察覺到APP的性能問題。在JS線程執行動畫，很容易引發性能問題，致使動畫的卡頓。相反，將動畫交給native線程來運行，能避免這個問題。大多數的動畫，均可以使用 Animated 而且設置 useNativeDriver:true 來實現。

8. 避免過早的優化細節

譯註 ：做者應該就是讓咱們抓住問題的主要矛盾，先解決 二八原則 中的 80% 部分。

細小的點，一般不是引發APP性能問題的罪魁禍首。

9. 性能優化：痛並快樂着

APP性能優化須要持續的投入不少精力，這和APP架構不太同樣——可是，性能優化的過程，也讓咱們有機會對react內部的機制有了更好的理解。

但願你喜歡這篇文章 🎉。

推薦閱讀

我強烈推薦 這個react native性能優化的視頻 ，它很是實用，很容易結合咱們實際狀況進行實踐。react native 官方團隊的 react native性能優化 很是值得學習。