還流させ、再描画
- なぜなら、素子サイズの寸法の一部（またはすべて）は、レイアウトは、非表示とレンダーツリー内の他の変更および再構築する必要がある場合。これは、リフロー（リフロー）と呼ばれています。各ページは、ページが最初にロードされたときに、少なくとも一回還流する必要があります。還流は、ブラウザが還流終了後、レンダリングツリー構造のこの部分を再レンダリングする障害の影響を受けツリーの一部を行います場合、ブラウザはスクリーンの影響を受けた部分を再描画し、プロセスが再描画となります。
-
ツリーをレンダリングする場合、いくつかの要素は、属性を更新する必要があるが、これらの属性は、外観のみの要素に影響を与え、スタイル、およびこのような背景色として、レイアウトには影響しません。再描画と呼ばれると呼ばれています。
注意：逆流再描画が発生し、再描画されますが、必ずしも逆流につながることはありません！！！
逆流が発生した場合：
ページレイアウトと幾何学的特性は、ニーズを変更すると還流します。以下は、ブラウザの逆流を発生します。
図1に示すように、可視DOM要素を追加または削除します。
図2に示すように、要素を位置変更。
図3に示すように、素子サイズを変える - マージン、パディング、ボーダー、幅と高さ
図4に示すように、コンテンツの変更 - 例えばテキストや画像サイズなどを算出幅を変更するために変更され、高さの変化が引き起こされます。
5、ページのレンダリングの初期化。
図6は、ブラウザウィンドウのサイズが--resizeイベントが変更されます。
逆流を軽減する方法、再描画
逆流を減らして、実際には、（組み合わせDOMとスタイルの変化よりも何倍以上）のレンダリング木に操作を再描画し、優れた最適化戦略ブラウザを使用しようとすると、情報のスタイルのための要求の数を減らすために削減する必要があることです。具体的な方法は以下のとおりです。
1.直接変更classNameの動的にスタイルを変更した場合、cssText（最適化されていないブラウザを考慮）を使用します。
2.要素がアップデートで対処「オフライン処理」を、操作するためにしてみましょう
A）ドキュメント・キャッシュ動作を使用し、そして還流を再描画トリガ;
B）表示の使用：なし技術を、イニシエータのみ回再描画還流;
C）cloneNodeを（真または偽）とのreplaceChild技術を使用し、そして重還流をトリガ塗装。
3.あなたが本当にアクセスしたい場合は、多くの場合、プロパティブラウザは、キューをフラッシュキャッシュの使用を原因と訪問しないでください
4.ツリーレンダリング返すのサイズを小さくする、アニメーションストリームから要素をしてみましょう