CSS3とtranslate3dをテストするための小さなアプリケーションを開発しています。アイデアは、画面上でランダムに移動する複数のDIVをレンダリングすることです。これは一種のパーティクルシステムです。おそらくWebGLまたはCanvasを使用してパフォーマンスを向上させることができますが、モバイルブラウザーでもスムーズに動作させたいので、パフォーマンスにはDOM操作の方が適していると思いました。
DIVの数を増やすために可能な限り最高のパフォーマンスを達成したいと思います。
しかし、ここに私の問題があります。ChromeまたはSafariでTimeLineを使用したときに見つけた「レンダリングの問題」があります。時々、ページ全体がレンダリングされ、SafariiPhoneまたはChromeAndroid+iPhoneで認識できる小さなラグが生成されます。
ですから、もしあなたの一人が挑戦に挑戦しているなら、私は多くのことを試みましたが、この高価な再描画を避ける方法を理解していませんでした。
ところで、このスニペットを最適化するための追加のアイデアがある場合は、遠慮なく返信してください。
ありがとう
----------更新1-----------
Ariyaのアドバイスに基づいて、コード（url）で更新し、左上のみを使用して別のテストを追加しました。Chromeが提供するFPSカウンターに基づくと、ほぼ同じフレームレートの左上のプロパティを使用すると、fpsがより安定していることがわかります。CSS3バージョンを最適化してパフォーマンスをさらに向上させることができるかどうか考えていますか？GPUアクセラレーションを使用したcss3の方が高速ですが、おそらく何か間違ったことをしました。
----------アップデート2-----------
requestAnimFrameを使用するようにコードを更新し、再描画が必要な場合にのみコードを起動します。そして、cssで定義したパフォーマンスグレーグラデーションの背景を殺しているのは、頻繁に再描画され、パフォーマンスを殺していることを発見しました。ただし、純粋なパフォーマンスの観点からは、上/左はCSS遷移よりも優れているようです:(。