DOMがたくさんあります。隠し対ディスプレイなし

Question

私はページにDOMがたくさんあり、表示するためにそれらをすべて設定しています：なし、ブラウザはまだ素早く反応します（スクロールが速い、ページはうんざりです）。

しかし、可視性：要素を非表示にすると、ブラウザはすべて画面上に描画されているように遅くなります。

誰かが詳細に説明することができますか？

Answer 1

をチェックアウト、彼らは（実際にはありません）描かれています。ブラウザは、彼らのためにスペースを保持しますので、目に見えるものをレイアウトする際には、項目を考慮する必要があります。 （完全に透明、何も描画されません）

ボックスが見えないが、それでもはレイアウトに影響を与えます。

はMDC visibility:hiddenを参照してください。要素の子孫は可視性がある場合に表示されます：可視（IEではバージョン7までは機能しません）。

代わりにdisplay: noneを指定すると、ブラウザは表示されているものだけを気にしレイアウトするようにします。それは他のものを全く考慮に入れる必要はありません。

目に見える/見えない比率と要素の数によって、これは異なることがあります。

Answer 2

visibility:hiddenこれらはすべて画面に表示されますが、ユーザーは表示されません。 代わりに、display:noneで描画されていません。

Answer 3

"ブラウザはすべて画面に描画されているかのように遅いです。"

タグはまだレンダリングされていますが、画面には表示されないため、これは遅いと思います。

方法で、まあthis

Answer 4

visibility: hiddenでは、適切なスペースを予約できるようにサイズを計算する必要があります。彼らは、効果的に描かれています。

Answer 5

display: noneは実際にDOMから要素を削除するためです。 visibility: hiddenは、それらを見えなくするだけですが、まだそこにあります。

display: noneのフォーム入力フィールドは、送信時にフォームに含まれないため、違いがわかります。単にvisibility: hiddenが設定された入力フィールドはそのままです。まあ、少なくともそれは私の経験です - 他のブラウザの動作が異なります。

Answer 6

display:noneを使用すると、ブラウザはこれらの要素を初期化したり、コンテンツをレンダリングしたりしません。これは、visibility:hiddenを使用している場合ではなく、これらの要素を初期化し、それらを隠すだけです。

http://wiw.org/~frb/css-docs/display/display.html

Answer 7

絵を想像してみてください。
あなたは白い背景を持っていて、1時間の間に多くの細部を持つリンゴを描き始め、次にそれを完全に別の白い塗料で覆います。 これはvisibilityです。

display:none最初から描画していないようです。もちろん、最初の負荷では高速です。

あなたががdisplay:noneを使用しているときの欠点があります：あなたが戻ってblock（またはinlineなど）にそれを切り替えているときに、ブラウザがちょうどペンキの最後のコートを傷つけていると、それはだ絵を描くが、視界の使用を開始する必要がありますバック。したがって、この場合はvisibilityが高速です。

しかし、visibility:hiddenを使用している場合は、要素がフロー内でその位置を保持するので、の要素は、に変更されません。

技術的な説明が必要な場合は、David Baron's talkを確認してください。

Answer 8

これは非常に興味深いものです。したがって、本質的にはは技術的にはopacity: 0と同じですか？

私はブラウザーメーカーではありませんが、可視性が隠されている要素がレンダリングまたは塗りつぶされず、代わりに要素の大きさが透明な四角形として塗りつぶされていると、大きなパフォーマンスが得られませんか？少なくとも、寸法がわかっている状況では。