requestAnimationFrameの内部では、どのように再ペイント/リフローが発生しますか？

Question

私は

requestAnimationFrame(function() { 
    el.appendChild(otherEl) 
    el.appendChild(anotherEl) 
    anotherEl.removeChild(someOtherEl) 
    anotherEl.appendChild(yetAnotherEl) 
}) 

ないような何かをたとえば、これの目的は、排尿、私たちは再描画/リフローの原因を避けるためにしようとしている時間中に発生する（同期？）リペイント/リフローを引き起こします​​？

ブラウザがスマートになり、最終的に結果のDOM構造をペイントするために、そのフレームが完了した後（すべてのDOM操作が完了した後）まで待ちますか？

リペイント/リフローを引き起こす可能性のあるものは何ですか？requestAnimationFrame内での作業は避けたいですか？

this html5rocks articleのスタイルリストには、修正されたときに再描画/再描画が発生するスタイルしか記載されていません。また、アクセスしたときにどのJavaScriptプロパティ（およびそのオブジェクトがどのオブジェクト上にあるか）がリフローを引き起こしているかどうか知ることもできます（つまり、特定のプロパティの値を取得するためにリフローが発生します）。原因

Answer 1

ん（同期は？）私たちは、このように requestAnimationFrameの目的の排尿、塗料の原因を避けるためにしようとしている時間 中に発生する再描画？

私はあなたが最初の質問だとは分かりませんが、とにかく答えるつもりです。

DOMから要素を追加または削除するとリフローが発生しますが、requestAnimationFrameはtranslateZ（0）またはtranslate3d（0,0,0）トリックの正式版であり、レイヤを強制的に作成します。その意味では、リフローを引き起こすことはrAFを使用することとは無関係です。あなたは、私たちがとにかく実装すべきスロットルを指していると仮定して、「ペイントを起こさないようにしようとしている間に起こる再描画」を挙げました。私がそれに適切に答えなかったら私に知らせてください。

または、ブラウザがスマートに、そのフレームが 完了するまで待機します（これらすべてのDOM操作が完了した後に）順番に に最終的に得られるDOM構造を描きますか？

すべての追加と削除が同じrAF呼び出しにあるとすれば、ブラウザーは（私の理解では）それらをすべて1つのフレームにペイントする必要があります。

再描画/リフローを引き起こし、そして我々は はrequestAnimationFrameの内部ながらやって避けたいと思うことができ、すべてのものは何ですか？

再ペイントは、表示の変更を引き起こしますが、レイアウトには影響しません。不透明度は再ペイントを引き起こさないので、アニメーション化するほうがはるかに安いです。

リフローはページの全体または一部のレイアウトに影響を与え、影響を受けた要素のサイズと位置が再計算されるため、アニメーションでは避ける必要があります。トランスレート、回転、スケールはリフローを引き起こさない。

この詳細についてはhereを読んで、レイアウトと再描画をトリガーするcssプロパティのリストを入手できます。

最後に、最後の質問をクリアするために、再塗りつぶしとレイアウトは、rAFの内部または外部にかかわらず発生します。それを覚えておいてください。