web-dev-qa-db-ja.com

DOMリフローとは何ですか？

私は2つのcssプロパティdisplay:noneとvisibility:hiddenの違いについて読んでいて、DOMリフロー termに遭遇しました。

声明は

display: noneはDOMリフローを引き起こしますが、visibility: hiddenはそうではありません。

だから私の質問は：

DOMリフローとは何ですか？

htmlcssdomvisibilityreflow
54
eirenaios

reflowは、ページのレイアウトを計算します。要素のリフローは、要素の寸法と位置を再計算し、その要素の子、祖先、およびDOMでその後に現れる要素のさらなるリフローもトリガーします。次に、最終的な再描画を呼び出します。リフローは非常に高価ですが、残念ながら簡単にトリガーできます。

次の場合にリフローが発生します。

  • dOMの要素を挿入、削除、または更新します
  • ページのコンテンツを変更します。入力ボックス内のテキスト
  • dOM要素を移動する
  • dOM要素をアニメートする
  • offsetHeightやgetComputedStyleなどの要素の測定値を取得します
  • cSSスタイルを変更する
  • 要素のclassNameを変更します
  • スタイルシートを追加または削除します
  • ウィンドウのサイズを変更する
  • scroll

詳細については、こちらを参照してください。 リペイントとリフロー：DOMの責任ある操作

82
Karlen Kishmiryan

リフローは、ドキュメントの一部またはすべてを再レンダリングする目的で、ドキュメント内の要素の位置とジオメトリを再計算するためのWebブラウザプロセスの名前です。

https://developers.google.com/speed/articles/reflow

display:nonedivがレンダリングされないようにdivを非表示にしますが、visibility:hiddenは非表示のみですが、スペースはまだ占有されています

10
Vitorino fernandes

つまり、display: none;、可視性が非表示の場合、ブラウザはDOM要素の位置を再計算します。 -ない。考えてみてください、visibility: hidden;は、DOMの要素サイズを変更しません。

1
degr