序文
最近の仮想DOMの研究、およびそれらレビューリフロー（から研究リフロー）と再描画（再描画）。
逆流及び再描画が、それは誰もが精通しているように思えるが、特に彼らが来ているものを言うことができないと言うこと。今、私は少し仕上げました。
ブラウザのレンダリング処理
これら二つの概念を理解する前に、我々は、ブラウザのレンダリングワークフローを見てみましょう。ここではWebKitのレンダリングエンジンで、例えば
- HTML文書へのブラウザ要求した後、パースHTML DOMツリーに
- CSSはCSSスタイルの規則に解析され
- 解析が完了した後、結合DOMツリー構造とスタイルの規則は、ツリーをレンダリング
- 各オブジェクトをレンダリングツリーをレンダリングするブラウザの位置とサイズを計算、すなわち、レイアウト（レイアウト）
- 最後に、図面（絵画）
逆流と再描画
リフロー（リフロー）
場合によって変更素子サイズ、レイアウト、および他の隠されたサイズは、還流として知られる木一部（またはすべての）再構築し、レンダリング。少なくとも、ページが最初にロードのリフロー時に一度各ページ。還流、ブラウザは、ツリー構造のこの部分をレンダリングして再レンダリングする障害の影響を受けツリーの一部を行います場合、還流終了後、ブラウザはスクリーンの影響を受けた部分を再描画し、プロセスが再描画となります。
再描画（再描画）
いくつかの要素は、このような背景色として、隠された、要素サイズ、レイアウトに影響を与えずに、スタイルの要素の外観のみに影響を与える属性を更新する必要があるツリーをレンダリングすると、再描画と呼ばれています。
注：還流を再描画し、再描画が必ずしも逆流につながることはありませんが発生します。
逆流の発生
- このような幅、高さ、マージン、パディング及びサイズ変化による他の特性の変化として可視要素のサイズが変化すると、
- トリガーウィンドウのリサイズイベント
- displayプロパティの変更要素
- 要素の位置を変更します
- 等
パフォーマンスの最適化
非常にインパクトのWebパフォーマンスを逆流し、再描画ごとに再解析HTMLとCSSは、その後、多くの計算を通過する木、必要性をレンダリング構築されているため、このプロセスは非常に時間の消費性能を消費しています。どのようにそれを軽減するには？提案
- ページ要素が適切なフォルダのimgスペースのように設定された高は、ゼロから全負荷への文書フローに占める、それが頻繁に再描画を生成します
- DOMの深さを減らして時間のかかるパーサを減らすことができます
- CSSを簡単にするために試してみてください
- 親要素の影響を低減するために、固定された：絶対または位置：複合アニメーションは、位置を使用して、ドキュメントフローの要素からそれを作ることができます
あなたがより良い提案を持っている場合はもちろん、ない、ここに記載された方法のすべてが、我々はそれを共有したいと考えています
参考資料
HTTPS：//kb.cnblogs.com/page/1 ...
ます。https：//www.html5rocks.com/zh ...