原文網址 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 註冊

你可能會有興趣

喜歡我們的分享嗎? 使用以下的社群分享按鈕也分享給你的朋友吧!

 

 

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

分類

reactjs