ReactNative

• 任何東西超過0.1 秒使用者就會感覺到

官方 Performance

JS frame rate (JavaScript thread)

• 商業邏輯會在 JavaScript thread 上跑
• ex : React application lives, API calls are made, touch events are processed, etc...

example 像是在比較複雜的應用中在 root component 去呼叫 this.setState 這會導致 re-rendering computationally expensive component subtrees
可以想見它可能會花 200ms 且會導致掉 12 frames.
任何動畫藉由 js 操作的將會顯示的向凍結一樣在這個時間中. 任何東西超過0.1 秒使用者就會感覺到

它經常發生在 Navigator transitions , 當你 push 一個新route, JavaScript thread 必須要 render 所有這個 scene 需要的 component 為了去送出適合的 command
給 native 端去建立 backing views 某些時候可能會在 componentDidMount 做某些事, 這會導致一秒地停頓

TouchableOpacity - JavaScript thread 無法處理 raw touch events 在 main thread, 這會導致 TouchableOpacity 無法 cannot react to the touch events and command the native view to adjust its opacity.

Common sources of performance problems

• Running in development mode (dev=true)

在 dev mode 效能是非常好的, 如果要測試效能要確定你是在 release builds (實機)

• Using console.log statements
  推薦 babel-plugin-transform-remove-console

cause a big bottleneck in the JavaScript thread. , 要確定有移除在 bundling 之前

• ListView initial rendering is too slow or scroll performance is bad for large lists

建議使用 Flatlist 或 SectionList. , the main one being nearly constant memory usage for any number of rows
假如你的 Flatlist 很慢去實作 getItemLayout 可以優化 rendering speed 藉由忽略 rendered items 的調整

• Dropping JS thread FPS because of doing a lot of work on the JavaScript thread at the same time