描画とかGPUアクセラレーションの怪 (モバイル編)

何かと不透明なあたり 気がつけば一ヶ月ほどブログを更新していませんでした。リハビリ記事です。 今回は、GPUを効かせる == それに関連するプロパティ（ただしOSやバージョンによって何がトリガかは厳密に異なる）を適用したら挙動が改善した、というようなノリの体験TIPSをゆるくまとめました。 このあたりの振る舞いについては、描画パフォーマンスの問題として、それなりに明らかになってきているように思います。WebKitのレンダリングプロセスにはじまり、GPU命令のサポートが受けられるのはどんな操作だとか、GPUへ処理が預けられるレイヤーの生成がどーとか、最近よく見聞きします。 自分が業務で扱っているスマートフォン向けのWebサービスでは、このような描画パフォーマンスの問題は、スクロールパフォーマンスと合わせて非常にクリティカルです。この辺りについてのロジカルなまとめは、某氏が近日中にまとめるらし

[silem]

“-webkit-transform: translate3d(0,0,0); ”

[nilab]

描画とかGPUアクセラレーションの怪 (モバイル編) ::ハブろぐ : -webkit-backface-visibility: hiddenなどでComposition Layerを強制的に生成させて、GPUに描画処理を送りこむ

[edo_m18]

やっぱりGPU周りの挙動はしっかり把握すべきだなぁ。Safariのデバッグ方法はだいぶ参考になりそう。

[noberyo]

Case4に注目

[d_animal141]

描画とかGPUアクセラレーションの怪 (モバイル編) ::ハブろぐ

[yasu-log]

［B!］描画とかGPUアクセラレーションの怪 (モバイル編) ::ハブろぐ

[uss267]

"iOS6のみ動きが引っかかる"時はこうすればいいのかー

[hedeyoshi]

css3アニメーションがスマートフォンでカクつく時に見たい感じ。

[kkeisuke]

特にGPUにレイヤーを送り込む系のプロパティを広域に適用すると、些細な描画の変更が都度GPUで処理されることで、そのオーバーヘッドがパフォーマンスに顕著に影響したりするよう