Contents
原文網址 Twitter Lite and High Performance React Progressive Web Apps at Scale
為什麼對這篇文章有興趣？
React 前端技術是由 Facebook 所維護的，Twitter 算起來是 Facebook 的競爭對手，如果 Twitter 也開始使用敵人所開發的框架來開發產品，這也代表著這個框架有它該有的價值，Twitter 的 Mobile Web 使用了 React, Redux, Node.js/Express 這些技術，並分享了他們遇到效能的瓶頸經驗，如果有在使用 React/React Native 開發產品或是服務，這些經驗分享是值得細讀的。
筆記
文章中使用了哪些工具?
預先知識
這篇文章除了要會以上的工具，作者提到要懂得看火焰圖，透過火焰圖才有辦法知道效能的瓶頸是出現在哪裡
相關文章
解決效能瓶頸的三個方向
針對瀏覽器做優化
- 使用 Route-Based 將程式碼做切割，這可以讓瀏覽器載入 Javascript 程式碼快很多，文中提到使用 Webpack 的 CommonsChunkPlugin 切成了 3 個 Javascript 檔案，每一個 gzip 後有 420KB
- 避免導致 Jank 的功能 – 文章中有引用 Googe Web 開發者網站中的一篇文章 – Rendering Performance 解釋什麼是 Jank ? 目前的手機裝置螢幕一秒鐘內會將螢幕顯示 refresh 60 次，所以當你的畫面有動畫或是在滑動手機畫面，瀏覽器必須配合裝置的 refresh rate ，如果以一秒鐘內更新畫面 60 次，那麼每次的 frame refresh 花費時間就是 1/60 = 16=66 ms ，瀏覽器會有額外的負擔做一些清理動作，所以你的工作最好在 10 ms 內完成，如果你無法達成讓 frame rate 下降了，在畫面顯示內容就會有顫抖現象，這種狀況就稱之為 Jank ，文中提到了 Twitter 開發了一種名為VirtualScroller的新的無限滾動元件，可以確切知道在任何給定的時間，什麼片段的Tweets被渲染到時間軸上，避免了需要在視覺上進行昂貴的計算 ( 這個 VirtualScroller , Twitter 並沒有釋出 source code ，所以其解決 Jank 的細節就無從得知了 ，但其原理應該是有一個背景 Thread 隨時將要顯示的畫面準備好，而不是需要的時候在跟 Server 端要)
- 使用較小的影像檔
針對 React 做優化
- 使用 shouldComponentUpdate 方法 – 當狀態或是資料變更時只更新該更新的元件，而不是所有的元件 ( 要是記得沒錯，這在 fat client 的 MVC library 應該是 common sense )
- 延遲不必要的工作直到 componentDidMount
- 避免 dangerouslySetInnerHTML – 因為剛開始 Twitter Lite 使用 SVG 圖形，早期 React 在元件中創建元素時並不支援大多數的 SVG 屬性，所以被迫使用 dangerouslySetInnerHTML，這樣做在載入元件做 rendering 時會變得很緩慢 ，React v15 以後的版本支援了比較多的 SVG 屬性，就要避免使用
- 當要掛載和卸載許多元件時延遲 rendering – 載入和卸載大型的 tree 元件在 React 是非常昂貴的，文章中提到剛開始按 Home icon ，畫面要將近 2 秒才會更新，Twitter Lite 為了解決這個問題做了一個 higher-order-component – deferComponentRender ，文中附有 sample code ，看了範例程式碼，其原理應該是在元件載入的時候將實際資料處理的動作 defer 處理 ( 跟在 fat client 處理一樣，當 view 顯示時不會在建構式處理資料載入的動作，而是先讓 view 建構完成後，等資料準備好再去 render ui )
針對 Redux 優化
- 避免經常性的儲存狀態
- 將批次動作變成單一處理 – 使用 react-redux 訂閱元件到資料狀態的變化，已經使用 Normalizr 和 combineReducer 將資料優化到大型儲存空間的不同區域，但是每次得到新的資料就要派遣不同的動作，以便添加到對應的儲存空間。這邊有提到已經有一些批次處理的 middleware – redux-batch-actions redux-batch-middleware redux-batch-enhancer 可以使用，或是自己寫一個。說明批次處理操作的好處的最好方法是使用Chrome React Perf extension
Service Workers
- 先預載資產 – 並不是所有的瀏覽器都支援 Service Workers 。但是有這個功能對 Twitter Lite 是非常寶貴的，有 Service Worker 功能可以有 75% 的改善 。Twitter Lite 利用 Service Worker 做 pre-caching ，如果沒有 Service Worker ，每次回到應用程式，就要重新將當前的 view 和 assets 重新下載，但是有支援 Service Worker 就可以在回到程式前在背景自動更新，下載，和 cache 任何變更的檔案
- 延遲 Service Worker 註冊
你可能會有興趣
- 想要入門 ReactJS ，可以參考 Wes Bos 的 ReactJS 課程
- UDMEY 有一位熱門講師 Stephen grider 也開了一系列的 ReactJS 課程 從入門到進階都有包含