リフローの再描画

まず、再描画と還流とは何かを理解してみましょう.
再描画:再描画と呼ばれる要素の可視性が変化します.可視性とはbackground,color,opacity,outlineなどの可視属性を指す.
再描画はブラウザに大きなパフォーマンス消費をもたらします.

.box{
    width: 100px; 
    height: 100px; 
    background: red; 
}
box.style.background = "blue"; //  

リフロー:エレメントの形状や位置が変化すると、周囲のエレメント(子、親、兄弟)に影響し、ページ全体が再レンダリングされる可能性があります.
性能の消耗は非常に恐ろしい.
注意:リフローは必ず再描画が発生し、再描画は必ずしもリフローが発生しない.

box.style.width = "200px";  //  +  

還流が発生した場合:1.onload(ページは少なくとも1回の還流をトリガーする)2.ページサイズを変更します.形を変える(width,height,padding,border,font...)4.位置を変更する(margin,left,right).DOM 6を追加または削除する.テーブルレイアウト
リフローを回避する方法:1.複数のスタイルセットを割り当てる

box.className = "active ";  
  
box.style.cssText = "width: "+100*3+"px; height: "+100*3+"px; background: blue";

2.アニメーションはできるだけ位置決め(position)または変形3を使用する.CSS式4は使用しない.tableレイアウトの使用を最小限に抑える