81

display:none2 つの CSS プロパティの違いについて読んでいて、 DOM リフローという用語visibility:hiddenに遭遇しました。

声明は

display: noneDOM リフローを引き起こしますが、visibility: hiddenしません。

だから私の質問は：

DOM リフローとは何ですか? どのように機能しますか?

4

3 に答える 3

124

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

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

  • DOM の要素を挿入、削除、または更新する
  • 入力ボックスのテキストなど、ページのコンテンツを変更する
  • DOM 要素を移動する
  • DOM 要素をアニメーション化する
  • offsetHeight や getComputedStyle などの要素を測定する
  • CSS スタイルを変更する
  • 要素のクラス名を変更する
  • スタイルシートを追加または削除する
  • ウィンドウのサイズを変更する
  • スクロール

詳細については、こちらを参照してください:再描画とリフロー: 責任を持って DOM を操作する

于 2014-12-24T12:51:54.227 に答える
16

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

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

display:noneがレンダリングされていないdivかのように非表示にしますが、非表示にするだけで、スペースはまだ占有されていますdivvisibility:hidden

于 2014-12-24T12:51:33.397 に答える
1

これは、 を設定するdisplay: none;と、ブラウザが DOM 要素の位置を再計算することを意味します。- いいえ。考えてみてください、それvisibility: hidden;は DOM の要素サイズを変更しないためです。

于 2014-12-24T12:51:35.817 に答える