1.逆流及び再描画の概念
逆流（リフロー）：と、内部のテキスト要素接合構造の変化を要素のツリー、レイアウト、表示または非表示、レンダリング、さらに祖先要素が変更されるさかのぼる、彼らの親要素に影響を与える可能性の幅と高さ、これは、ページの再構成が発生し、ページ全体の周りに、あるいは再レンダリングする内部素子を引き起こす可能性があり、還流が起こります。
再描画（再描画）：構造要素（幅と高さ、レイアウト、隠されたディスプレイ、内部文字サイズ）変更されていないこのような内部の背景色、テキストの色、枠線の色などの、唯一の外観が変更されたスタイル要素、。このとき、ブラウザが再描画させ明らかに逆流よりも高速に再描画されます。
還流は、再描画をトリガー逆流をトリガ必ず再描画されます。
2.性能還流への影響は再描画します
ここでは、知識ポイントのため：レンダリングJS CSSスタイルは、jsのスクリプトをロードすることがとても遅いの実行時間に影響します。次の理由の場合：
それは別のUIレンダリングのCSSスタイルのレンダリングでJavaScriptのスクリプト、レンダリング：レンダリング時間がWebブラウザには二つのスレッドが有効になります。しかし、2つのスレッドは、UIスレッドを実行するJavaScriptスレッドが一時停止、およびその逆を中止された場合、相互に排他的です。UIスレッドがレンダリングされるページを実行するときに、JSのスクリプトは、必然的に、この変更を行うために、ページビューで、いくつかのスタイルを変え含むことになるので、より正確スクリプトは、それが実行するときに、UIスレッドレンダリングが完了するまで待機しなければならなかったJS。
だから、UIスレッドが遅れて反応jsのコード、状況ケイトンで、その結果、レンダリングし続けるときに、ページスタイルの要素が頻繁に変更されたとき。リフローと長いUIスレッドのレンダリング時間を行います再描画、あまりにも多くはそうリフローを最小限にし、再描画するために、サイトのパフォーマンスが低下するようになります。
3.逆流を軽減し、再描画する方法
次のようにつながっている逆流が発生します。
- ウィンドウサイズを変更します
- 文字サイズの変更
- このようなユーザ入力ボックスQiaoziとして、コンテンツを変更します
- 活性化擬似クラス、例えば：ホバー
- オペレーティングクラス属性
- DOMのスクリプト操作
- OffsetWidthコンピューティングとoffsetHeight
- 設定スタイルプロパティ
次のような属性を対応するCSSは以下のとおりです。
- ボックスモデル関連のプロパティ
- ポジショニングとフロートプロパティ
- テキストノードの内部構造
次のようにCSSプロパティを再描画するためにリードします：
逆流を削減し、次の点に注意して再描画：
| 1：代わりにトップの、変位特性を変換して...のmargin-left、マージントップ、左 2：代わりに、視認性の不透明度だけでなく、これらの属性は、逆流を防止することができます存在のレイヤーを作成することができtranslateZ translate3dか持っています しかし、私の実験後の第二の点に、我々は変換しない場合、ことがわかった：translateZは（0）不透明で、その後、やはり逆流を作るが、唯一の逆流を再描画生成するだけでなく、視認性であります 不透明度プラス変換：逆流を発生し、translateZ / 3Dの後に、このプロパティを再描画しません。 3：コードのDOM JS代わりにのみ選択クラス名で、素子パターンを複数設けて使用しないでください。 4：あなたが最初にこのDOMを非表示にすることができ、複数のスタイルを設定し、それらを設定するために、JSのDOMを使用する必要がない場合 5：このようなサイクルのようなDOMのスタイルを取得しないでください：offsetWidth、offsetHeight、clientWidth、clientHeight ...これら。ブラウザは、スタックがフルブラウザは、1回の変更はすべてのスタイルを誘発し、スタックが更新されますときに、スタック内のリターンを複数に格納されることを返すためのバッファリング機構を備えています。しかし、あなたはあなたが絶えず増加ページの逆流が生じ、バッファ・スタックをリフレッシュします正確な答えを与えるために、これらの要素の数倍、ブラウザの実際のスタイルを取得する場合。 したがって、この問題を回避するために、あなたは、in vitroでのループを保持する変数を使用する必要があります。 6：再びテーブル全体のレイアウトを引き起こしますスタイルの更新でも、すべてのセルのテーブルの各行と、テーブルのレイアウトを使用しないでください 7：需要に応じて、アニメーションビジネスの意思決定のスピード。 8：その要素の頻繁な変更は、ビデオ・タグを使用してビデオのため、変換プロパティに追加されなければならないため 9：あなたは必要なGPUアクセラレーションをオンにしますが、乱用することはできません |
関連資料：