rendering
Overview
Rendering Flow : Parse => Style => Layout => Paint => Composite
大きさや位置に関する変更はRendering FlowにおけるLayoutを変更する処理に当たる。つまり計算量が大きくなりrendering速度が落ちる。
ex : height, width, padding, margin, top, right, left, bottom, box-shadowなど
色に関する変更はRendering FlowにおけるPaintを変更する処理に当たる。Layoutを変更するほど計算量が多くないがMain Threadを使う処理なので極力変更は避けたい
ex : background-color, background-image, border-color, colorなど
逆に、Compositeで行われる処理は計算量が少なくて動作が軽い。そのためCompositeで行われる処理を中心にアニメーションを実装する必要がある.。
Detail
Paintのフェーズでは要素が描画される
ここでは要素の重なりを考慮しながら順番に描画される
描画される際にLayer Treeという構造によってLayerの分離が行われる
Layoutの分離は再描画する際に全てのLayoutを再計算する必要がなくなるため動作が軽くなる
Layoutの分離を行うのはtransformやwill-change、opacityによる指定があった時である
solution
transformやopacityを変更するような処理はCompositeで行われる処理であるため、動作が軽く処理が早い。
大きさ・位置・色に関する変更はtransformやopacityを使用する
caution : Safariが使用しているWebkitではTransformプロパティーの変更でもLayoutから再計算が行われる
参考