js関数document.appendchildを使用するとブラウザの再描画を避ける方法はありますか？

Question

document.appendchild（）はDOMの要素をメモリに保存するための良い方法でしたが、ブラウザをチェックして、移動した要素が再描画されていることに気付きました。これを避ける方法はありますか？ appendChildを使用せず、要素を再描画せずに要素を移動できる別の関数を使用していますか？

トランスフォーム：translateを使用して、私が見つけた最良の解決策は、正確には私が探しているものではありません。これは画面上で要素を動かすだけです。

Answer 1

一般的に、再塗りつぶしの最善の方法は、それをなくすことではなく、猶予でそれを処理することです。

最終的な目標は、可能な限りDOMへの変更を制限することです。これはあなたの目標になると思われます。

要素の移動に関しては、要素に依存していることは確かですが、要素の追加方法についてはいくつか確認してください。

1. ページのリフローを必要としない要素の宛先を設定します。要素を移動する前にこれを行うことができれば、より良い形になります。
2. 実際のDOMへの変更が含まれていることを確認し、できる限りアニメーションがCSSを介して一括して行われるようにします。 translateによってこれを処理しているように思えますが、それはDOMを変更しないため影響が少ないからです。
3. 要素を実際にDOM内の新しい場所に移動する目的を達成するには、要素を新しい場所に変換した後、新しい場所にその要素のコピーを追加してから、ページのどのピクセルも変更する必要はありません。

最終的には、ページの再描画を省くことはできませんが、ページの再描画を大幅に削減することができ、再描画が大幅に削減されます。

Answer 2

私の心を傷つけます。要素にCSSプロパティの下に設定すると、私はそれが要素と*ない*再描画を移動することに意味を作ることができる方法を理解していない全体のDOM

.element { 
    will-change: transform; 
    transform: translateZ(0); 
}