【CSS3】 iPhone では、position より transform:translate() の方が再描画コストが安い?

ちょっと前の記事で、border-image を使うと iPhone の Mobile Safari のアニメーション処理がカクカクになってしまうという実験をやったが、今回はそれの続きで、iPhone で、重ねて表示したレイヤーにスライドアニメーションを適用する場合の再描画処理についての実験。
題材は、前回の実験のパフォーマンステストGを掘り下げた感じ。

仮説

次の仮説について検証してみた。

position+top+left だと要素自体を移動させるために他要素への影響があり得るが、transform:translate() だと影響範囲を要素内だけと完全に限定できるため、再描画コストが安くすむ。

実験

今回実験用に用意したHTMLはこちら

パフォーマンステストAは positiontop を操作してパネルをスライドさせている。パフォーマンステストBは期待される動作はAと同じだが、 transform:translate() を使って実装したもの。

iPhone 3GS + iOS4 + Mobile Safari(AppleWebKit 532.9) で動作実験をしたところ、次のような結果。

パフォーマンステストA
重くなる。
パフォーマンステストB
スムーズに動作する。

結論

動作のスムーズさに明確な違いが現れた。仮説は正しかったように見える。

iPhone 3GS しか手元にないため iPhone 4 では確認していないが、おそらく、より歴然と差がつくのではないだろうか。 (前回の実験で、Retinaディスプレイの iPhone 4 は、 iPhone 3GS より再描画に時間がかかるという結果が出ている)

気をつけたいのは、今回のように、得られる効果が同じでも実装の仕方が複数あるという場合に、「効果そのもの」よりも、それが「どういう意味の効果なのか」を正確に考慮するべき、ということか。ぱっと思いつかないけど、同様のケースが他にもありそう。

やっぱり iPhone はよく考えて作られてるなぁ、という印象を強めた結果だった。


プロフィール

コヤナギ トモヤ

ウェブ系エンジニアしてます。ウェブデザイナー、ウェブディレクターとしてウェブ制作の仕事に携わり、今はエンジニア職に流れ着きました。誰かのお仕事をちょっとだけ効率化するような支援ツールの開発が好き。オープンソースとMITライセンス大好き。人生後半は自由と民主主義のコントリビューターとして過ごす予定。

ウェブ制作支援ツール Pickles 2 をオープンソースで開発しています。

PHP/JavaScript/NodeJS/nwjs/Laravel/Pickles2/オープンソース/心理学/倫理/自由と民主主義

RSSフィード

ページの先頭へ戻る