60fpsOnTheMobileWeb

60fps on the mobile web — Flipboard Engineering

react-canvas 関連の話

DOM vs. Canvas

  • DOMは遅いなんてもんじゃ無く、とんでもなく遅い(Canvasとくらべて)
    • Immediate mode vs. retained mode
    • 例)z-indexがCanvasに無いのは、Canvasが描画オブジェクトに関して情報を保持しないから

Scrolling at 60fps

  • mobileで60fpsを実現するにはreflowの発生を引き起こすDOM変更をスクロール中は控えないといけない
  • flipboard(react-canvas)ではスクロール時に一つCanvasエレメントを使う。(これがoff-screen canvas?)
  • 全レンダーツリーは次のフレームにて再描画される。
  • 一見すごく遅そうだけど、 off-screen canvas を忘れてはならない。描画結果はここにcacheされる。
  • Imageレイヤーだけでなくtextやshapeにも適用される。画像描画とテキスト描画は最もコストが高い処理である。
  • これらのレイヤーは一度描画されれば off-screen canvas を使うことで再描画がめちゃ早くなる。

http://engineering.flipboard.com/assets/mobileweb/scrolling.gif

Object pooling

  • スクロール中は、大量の RenderLayers が生成され破棄される。ゴミを大量に出す。
  • これを避けるためにRenderLayersと関連オブジェクトはプーリングされる。

Fast snapshotting

  • コンポジットレイヤーをcacheできるおかげで、描画画面をbitmapとして扱える。

http://engineering.flipboard.com/assets/mobileweb/flip_ui.gif