私はブラウザのレンダリングについて深く掘り下げようとしており、講演の準備としてこの小さなデモを思いつきました。
スケジューリングをからrequestAnimationFrameに簡単に切り替えることができるアニメーション デモをまとめました。setIntervaltop/lefttop/lefttranslate3d(0,0,0)translate3d(x,y,z)
translate3dsは特効薬ではないことがわかりました。特に、あまりにも多くの要素に適用するとコストがかかる可能性があることがわかりました。ただし、私の注意を引いた特定のことが 1 つあります。positionerからDefaultPositionerに切り替えると、Translate3dPositioner以前よりもスタイルの再計算フェーズが長くなるようです。私はそれについての情報を見つけることができなかったので、誰かがここで何が起こっているかについてもっと情報を共有できるかどうか疑問に思っています.
デモへのリンクは次のとおりです: http://plnkr.co/edit/TKwKBk?p=preview
app.jsファイル内で実装を切り替えるだけです。
もう 1 つ: 再開をクリックしてデモを開始するときは、すべてのボックスが少し離れるまで少し待つ必要があります。私はそれが貧弱なデモであることを知っています;-)