60fpsOnTheMobileWeb
60fps on the mobile web — Flipboard Engineering
react-canvas 関連の話
DOM vs. Canvas
- DOMは遅いなんてもんじゃ無く、とんでもなく遅い(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 を使うことで再描画がめちゃ早くなる。
Object pooling
- スクロール中は、大量の RenderLayers が生成され破棄される。ゴミを大量に出す。
- これを避けるためにRenderLayersと関連オブジェクトはプーリングされる。
Fast snapshotting
- コンポジットレイヤーをcacheできるおかげで、描画画面をbitmapとして扱える。