リフロー逆流(再配置、書き換え)、再描画再描画

HTMLフローレイアウトモデル、レイアウト処理は、上から下へが行われ、左から右にすることができます。

ブラウザはドキュメントの一部またはすべてが、ドキュメント内の要素の位置と形状を再計算し、再描画するために還流プロセスを指します。還流はDOMツリー全体を再構築するためにつながる可能性があるので、それは主要なキラーのパフォーマンスです。
各ノードでのDOMツリーは、その子ノード、でも親ノードとリフロー兄弟ノードを引き起こす可能性があり、そして彼が再描画をトリガーすると、オーバーヘッドをリフローノードをリフロー、リフロー法を持っています非常に高価です。一部の高性能コンピュータでおそらく何も、しかし、リフローは電話で、このような低パフォーマンスで発生した場合には、このプロセスは非常に苦痛と電力を消費します。

次のアクションは、逆流が発生します。

①ウィンドウのサイズを変更します

②フォントサイズのサイズ変更

③スタイルシートを追加または削除

コンテンツの変更(入力テキスト入力は、につながる)④

⑤起動CSS擬似クラス(:ホバー)

⑥動作クラスは、追加または削減、属性

⑦JSオペレーティングDOM

⑧オフセット関連のプロパティの計算

の⑨スタイル設定値

 

リフローは避けられない、パフォーマンス上の唯一のリフローへの影響は最小限に抑えられ
還流ページを減らすために

1、DOMオフラインレビュー:

まず、ディスプレイへのDOM:なし(一回リフロー)は、その後、変更方法に変更する方法を考えます。そのような彼を示し、その後、100回の変更、など。

複数のDOMノードを作成する必要がある場合は、完成した使い捨て追加ドキュメント・ドキュメントを作成するために使用することができる:例えば、動的配列要素(例えば、10のLi)を添加、還流の数を減らすために、一箇所ではなく、単一の追記に添加しました。

2は、スタイルを変更する集中しました:

スタイルを変更するには、できるだけ少しのプロパティ

クラス名を変更することでスタイルを変更してみてください。

要素が絶対位置に設定または固定属性。必要なリフローのみ自身と下位の要素をリフローする必要がある場合、標準的な流れからの要素も、DOMツリーからのスピンオフ。

テーブルのレイアウトを使用しないでください。トリガーリフローテーブル要素のテーブルたら、他の要素リフローの全てをもたらすであろう。適切な使用のテーブルの場合、テーブルレイアウトがラインによって描画テーブル行を可能にするであろうれ、autoに設定するか、または固定することができ、このアプローチはまた、リフローの範囲を限定することを意図しています

ブラウザのリソース要件の発現が比較的高いため、表現の使用は避けてください。(ページのロードを含む)それは再びすべての呼び出しを再計算されます

また、表示を実行します。それは発見の場所を変更しないので、隠されただけで、再描画をトリガーします:なしリフローは視認性が、起こる、となります。

 

 

塗り替え::

1.(再描画)再描画は何ですか

ボックスの位置、大きさ、色、フォントサイズ、およびように決定などの他の属性は、再び描かれた彼らの特性に応じて、これらすべての原色を入れたブラウザ場合は、ページ上で提示されるコンテンツは、このプロセスが再描画と呼ばれています

再描画するためにつながるどのような状況の下で2、

再描画は変更がAN要素皮膚に作った可視性を変更しますが、そのレイアウトに影響を与えることはありませんされている場合に発生します。」 -目に見える外観を再描画に変更された要素で発生したが、時間のレイアウトに影響を与えませんでした。例えば、唯一のDOMエレメントのフォントの色変更(のみリペイントを、レイアウトを調整する必要がありません)

参考ます。https://www.imooc.com/article/51623
参考:https://www.jianshu.com/p/0b45a6bb3c6b

 

おすすめ

転載: www.cnblogs.com/caozhuzi/p/11210531.html