visibility：hiddenとdisplay：noneのパフォーマンスの違い
JQuery Backbone.js Webアプリケーションで物事を単純化したい。そのような単純化の1つは、メニューウィジェットとダイアログウィジェットの動作です。
以前は、開始時にメニューのdivボックスを作成し、display: none; opacity:0;を使用して非表示にしました。メニューが必要なとき、スタイルをdisplay:blockに変更し、jQuery ui位置ユーティリティを使用してdivボックスを配置し（display:noneの要素は配置できないため）、完了したら、最終的にopacity:1のスタイル。
visibility:hiddenでそれらを非表示にしたいので、必要な場合は位置ユーティリティを使用してからスタイルをvisibility:visibleに変更します。この新しいアプローチの使用を開始すると、Webアプリケーションセッション全体で、display:noneで隠されていた以前のdivボックスとは対照的に、隠されているがスペースを占める約10個のdivボックスができます。
私の新しいアプローチの意味は何ですか？ブラウザーのパフォーマンスに影響はありますか？
display:noneとvisibility:hiddenのパフォーマンスの違いを認識していません-たとえ10個の要素があるとしても、それは完全に無視できます。あなたの主な関心事は、あなたが言うように、要素をドキュメントフロー内に残したいかどうかです。その場合、visibilityは要素のボックスモデルを維持するのでより良いオプションです。
display:none;要素は レンダーツリーのすべてではない であるため、額面でのパフォーマンスが向上します。
しかし、これから実際に目に見えるパフォーマンスの問題があるとは思わない。必要な場合opacity: 0またはvisibility: hiddenその機能のために、それらを使用します。機能が必要ない場合は、display: none;
JavaScriptを使用して表示状態と非表示状態を切り替える場合、visibility：hiddenの方がパフォーマンスが優れています。表示状態と非表示状態の両方で常に同じ量のスペースを使用するので、表示または非表示にするたびにその下の要素がリフローすることはありません。 display：noneの場合、ドキュメントのフローからそれを削除し、それをdisplay：blockに設定すると、それを再レンダリングして、その要素の下にあるすべてのものを押し下げ、本質的にすべてのものを再びレイアウトします。
ただし、ボタンを押すときに表示状態を切り替えるなどの操作を行う場合は、パフォーマンスの違いは無視できるため、パフォーマンスの向上よりもニーズに合ったものを使用する必要があります。 1秒あたり約20回でdomを使用してアニメーション化する場合、visibility：hidden vs display：noneのパフォーマンスを心配することができます。
visibility: hiddenはドキュメントのリフローを引き起こしませんが、display: noneはリフローを引き起こします。
display: noneは、HTMLエンジンを完全ににして、要素とその子を無視します。エンジンはvisibility: hiddenでマークされた要素を無視しません。要素とその子に対してすべての計算を行いますが、例外は要素がビューポートにレンダリングされないことです。
位置と寸法のプロパティの値が必要な場合は、visibility: hiddenを使用する必要があり、通常、幅と高さが0で別の要素でその要素をラップすることにより、ビューポートの空白を処理する必要があります。 '。
display:noneは、ドキュメントの通常のフローから要素を削除し、要素とその子の位置/高さ/幅の値を0に設定します。要素のdisplayプロパティがnone以外の値に変更されると、完全なドキュメントリフローがトリガーされます。これは大きなドキュメントの問題になる場合があります。機能が制限されたハードウェアでレンダリングされます。
display: noneは、ビューポート上の要素を非表示にするときに使用する自然で論理的なソリューションです。visibiliy: hiddenは、必要な場所で必要なときにフォールバックとして使用する必要があります。
編集：@Juanが指摘したように、display: noneは、DOMツリーに多くの要素を追加する必要がある場合に選択できます。 visibility: hiddenはツリーに追加された各要素のリフローをトリガーしますが、display: noneはトリガーしません。
まあ、_display: block_と_visibility: hidden_の主なパフォーマンスの違いは、たとえば100000個の要素のリストがある場合、_visibility: hidden_はDOMのハングからあなたを救うことはないということです。 t DOMから要素を削除します。 _visibility: hidden_は、_opacity: 0_ + _pointer-events: none_のように機能します。 _display: none_はElement.remove()のように動作します。
「非表示」ボタンの下にフォームがある単純な静的ページで両方を試した個人的な経験から、visibility: hiddenは完璧に動作しますが、display: noneは、クリック可能なボタンがミリ秒だけ非表示のボタンを表示しようとしているかのように、クリックするとわずかにジャンプします。
さて、visibility：noneはまだdivのスペースを使用しています。そのため、位置が既に割り当てられているため、位置決め部分をスキップすることができます（これにより、パフォーマンスが向上します）。
しかし、どういうわけか、「show」イベントがトリガーされたときにスペースを正しく割り当てるにはdisplay：noneアプローチが必要だと思います。
これは何らかの形でこの質問に関連していると思います： CSSプロパティ：ディスプレイvs.可視性
興味深い部分を引用します。
dOM階層から要素が削除されることはありません。 display：noneを使用すると、すべてのブロックレベルの表示「スタイル」は完全に「非表示」になりますが、visibility：hiddenを使用すると、要素自体は非表示になっていますが、それでもDOMの視覚的なスペースを占めています。
両方のバージョンはまだDOM階層にあるため、ブラウザーのパフォーマンスに関して実際の違いはないはずです。これらのプロパティは、DOMに関する要素の表示方法howにのみ影響します。