どのようなHTMLをロードするときに起こります
非表示にするにはなし、ならびにJSなどの要素を持つ動的に追加：ページのロード時に、ブラウザはDOMツリーに入るためにHTMLコードを解析し、DOMツリーは、ディスプレイを含むすべてのHTMLタグが含まれています。
解決スタイル構造へのすべてのスタイルブラウザは、（ユーザ定義のCSSやユーザーエージェント）
、ツリー同様のDOMツリーをレンダリングし、DOMツリー構造とスタイルを組成した後、ツリーをレンダリング構築しますが、大きな違いパターン認識は、ツリーをレンダリングすることができますので、 、これらはノードのレンダリングに使用されることはありませんので、プレゼンテーションには影響しません：各ノードは、ツリーは、独自のスタイルを持ってレンダリング、および（ノードのどれも、同様にヘッドノードディスプレイなど）に隠されたノードが含まれていない木をレンダリングそれは、レンダリングツリーに含まれません。私自身の理解では、そのシンプルなDOMツリーであり、我々は木をレンダリングレンダリング、CSSの後に一緒に書きました。
逆流は何ですか
なぜならレンダーツリーとニーズの素子サイズ、レイアウト、非表示の大きさやその他の変更の一部（またはすべて）が再構築されるとき。これは、リフロー（リフロー）と呼ばれています。各ページには、少なくとも一度逆流する必要があるページが最初にロードされたときにビルドにツリーをレンダリングするので、この時間は、特定の逆流が発生しています。還流、ブラウザは、ツリー構造のこの部分をレンダリングして再レンダリングする障害の影響を受けツリーの一部を行います場合、還流終了後、ブラウザはスクリーンの影響を受けた部分を再描画し、プロセスが再描画となります。
再描画とは何ですか
ツリーをレンダリングする場合、いくつかの要素は、属性を更新する必要があるが、これらの属性は、外観のみの要素に影響を与え、スタイル、およびこのような背景色として、レイアウトには影響しません。再描画と呼ばれると呼ばれています。
違い：
彼らは非常に異なっている：
還流が再描画と再描画が必ずしも逆流につながることはありませんが発生します。例えば：のみ色の変化は、リフローを生じさせることなく再描画するときに発生するであろう
ページレイアウト及び幾何学的特性を還流する必要性を変更するとき
など：要素のサイズを変更し、目に見えるDOM要素を追加または削除、要素の位置の変化-マージン、塗りつぶし、枠線、幅と高さ、内容の変更
拡張：
ブラウザのヘルプ
私たちは高い逆流のコストの割合を描くことを学ぶことができるよう、関係再構築する必要がありますどのように多くのノードツリーレンダリングで過ごす還流
ため、これらのメカニズムの存在を、ブラウザがこれらの操作を最適化するために私たちを助ける、ブラウザが1を維持しますキュー、すべての原因キューの再描画操作に逆流し、キュー内の他の事業一定数または一定の時間間隔に、ブラウザは、バッチを実行し、キューをフラッシュします。これは、逆流何度もできるように再描画再描画の還流になります。
その最適化
しかし、自分自身よりも、ブラウザによって、私たちは、逆流を軽減し、再描画文言の一部を変更することができ
、それらのそれぞれのスタイルを変更するのではなく、そのような時間のスタイルを変更するよう、しかし直接classNameがcssTextを使用する必要がある変更が、問題があることに注意してください、元cssTextは、オリジナルのスタイルとして、クリアされます「表示：なし;」が、その後、JSの上に実行した後に、表示が削除されました。
この問題を解決するために、この方法は、cssTextが蓄積採用してもよいが、IEが蓄積サポートしていない、前にセミコロンを追加し解決することができます。
一度、我々は避けるためにcloneNodeを（真または偽）を使用することができ、そのようなあなたはdiv要素、pはそのトリガー逆流及び再描画回数だけ、内側に3回を追加する追加した場合、三つのサブ要素pを持つdiv要素を追加したいときなど、ノードが追加再び同じようappenedすべての良いクローンに追加するには、他の多くの方法があります言おうとしていません