リフロー和リペイント

ブラウザは、基本的なプロセスを解析し、

ブラウザは、基本的な流れを解析し、

リフロー和リペイント

リフロー、ブラウザは、場所に基づいて計算され、結果は様々なスタイルの中に要素に基づいて決定されます。
再描画：relfow完了した後に、これらの要素のそれぞれの特性に応じてブラウザを再描画します。

そして、リフロー操作は、再描画を引き起こし

操作原因リペイント

要素の外観の変化が、レイアウトを変更しません

1. 可視

2. 概要

3. 背景色

操作の原因リフロー

1. ウィンドウサイズを変更します

2. フォントを変更します

3. 追加と削除スタイルシート

4. このようなユーザ入力テキスト入力ボックスとして、コンテンツを変更します

5. アクティベーションの擬似クラス

6. オペレーティング・クラス属性

7. DOMのスクリプト操作

8. コンピューティングとoffsetHeight OffsetWidth

9. スタイルプロパティを設定します

表示：なしトリガリフロー、および可視性：隠されたトリガ再描画、位置が変更されていないので、

回避し、影響を最小限に抑えるために、

1. 直接変更したい要素（親要素の子要素に作用することによって回避するが、子要素で直接的な役割を）変更します

2. インラインスタイルを避けるために、イエロー

3. アニメーションセットは、固定要素、または絶対位置について

4. スピードが頻繁にリフロー、遅い、スムーズにトレードオフ

5. 避けテーブルレイアウト

6. JS回避のCSSは、式（IEのみ）が含まれてい

リフローや再描画の要素を確認する方法

使用Chromeデベロッパーツールのタイムライン：
タイムライン

参考文献：

1. リフロー＆再描画します：CSSのパフォーマンスがJAVASCRIPTがSLOW MAKING？

2. 再描画、リフロー基本的な理解と最適化（2）