67

jQueryBackbone.jsWebアプリケーションの内容を単純化したいと思います。そのような単純化の1つは、メニューウィジェットとダイアログウィジェットの動作です。

以前は、開始時にメニューのdivボックスを作成し、を使用してそれらを非表示にしdisplay: none; opacity:0;ました。メニューが必要になったときに、スタイルを変更してdisplay:block、jQuery ui位置ユーティリティを使用してdivボックスを配置し（要素をdisplay:none配置できないため）、それが完了したら、最終的にスタイルをに変更しましたopacity:1。

ここで、それらをで非表示にしたいのですがvisibility:hidden、必要な場合は、位置ユーティリティを使用して、スタイルをに変更しvisibility:visibleます。この新しいアプローチを使い始めると、以前のdivボックスが。で非表示になっているのとは対照的に、Webアプリケーションセッション全体で約10個のdivボックスが非表示になりますが、スペースを占有しdisplay:noneます。

私の新しいアプローチの意味は何ですか？それはブラウザのパフォーマンスに何らかの影響を及ぼしますか？

4

8 に答える 8

84

display:none;要素はレンダー ツリー allに含まれていないため、額面通りのパフォーマンスが向上します。

ただし、これにより実際に目に見えるパフォーマンスの問題が発生することはないと思います。必要な場合opacity: 0、またはvisibility: hidden その機能のために、それらを使用してください。機能が必要ない場合は、使用してくださいdisplay: none;

于 2012-08-01T10:14:13.537 に答える
56

JavaScript を使用して表示状態と非表示状態を切り替える場合は、visibility:hidden の方が優れたパフォーマンスを発揮するはずです。表示状態と非表示状態の両方で常に同じ量のスペースを占めるため、表示または非表示にするたびにその下の要素のリフローが発生することはありません。display:none の場合、ドキュメントのフローから削除し、それを display:block に設定すると、再レンダリングされ、その要素の下のすべてが押し下げられ、本質的にすべてのものを再びレイアウトします。

しかし、ボタンを押して表示状態を切り替えるようなことをしている場合は、パフォーマンスの違いは無視できるので、より良いパフォーマンスを発揮するものではなく、ニーズに合ったものを使用する必要があります。1 秒あたり約 20 回で dom をアニメーション化する場合、visibility:hidden と display:none のパフォーマンスについて心配することができます。

于 2012-09-28T13:54:04.533 に答える
49

visibility: hiddenドキュメントのリフローは発生しませんが、発生display: noneします。

display: none：HTMLエンジンは、要素とその子を完全に無視します。エンジンは、でマークされた要素を無視しませんvisibility: hidden。要素とその子に対してすべての計算を実行します。ただし、要素はビューポートにレンダリングされません。

位置と寸法のプロパティの値が必要な場合visibility: hiddenは、使用する必要があり、ビューポートの空白を処理する必要があります。通常は、その要素を幅と高さが0で、「オーバーフロー：非表示」の別の要素でラップします。

display:noneドキュメントの通常のフローから要素を削除し、要素とその子の位置/高さ/幅の値を0に設定します。elementsdisplayプロパティが以外の値に変更されるとnone、完全なドキュメントリフローがトリガーされます。これは、大きなドキュメントの場合に問題になる可能性があります。機能が制限されたハードウェアでレンダリングされる場合は、それほど大きくないドキュメントもあります。

display: noneビューポートで要素を非表示にするときに使用する自然で論理的なソリューションでvisibility: hiddenあり、必要に応じて、フォールバックとして使用する必要があります。

編集：@Juanが指摘してdisplay: noneいるように、必要なのはDOMツリーに多くの要素を追加することである場合に選択することです。visibility: hiddenツリーに追加された各要素のリフローをトリガーしますが、トリガーしdisplay: noneません。

于 2012-08-01T10:15:33.620 に答える
13

display:noneとのパフォーマンスの違いはわかりません。visibility:hiddenたとえあったとしても、わずか10個の要素では、完全に無視できます。あなたが言うように、あなたの主な関心事は、要素をドキュメントフロー内に残したいかどうかです。この場合visibility、要素のボックスモデルを維持するので、より良いオプションです。

于 2012-08-01T10:12:47.973 に答える
0

これは、この質問に何らかの形で関連している可能性があると思います：CSSプロパティ：表示と可視性

興味深い部分を引用します。

要素がDOM階層から削除されることはありません。display：noneを使用すると、すべてのブロックレベルの表示'styles'は完全に'hidden'になりますが、visibility：hidden; 要素自体は非表示になっていますが、それでもDOMの視覚的なスペースを占めています。

したがって、両方のバージョンがまだDOM階層にあるため、ブラウザーのパフォーマンスに関して実際の違いはありません。これらのプロパティは、DOMに関して要素がどのように表示されるかにのみ影響します。

于 2012-08-01T10:22:25.470 に答える
0

そうですね、visibility:none はまだ div のスペースを使用しています。したがって、その場所はすでに割り当てられているため、位置決め部分をスキップすることができます (それにより、パフォーマンスが向上します)。

しかし、「show」イベントがトリガーされたときにスペースを正しく割り当てるには、 display:none アプローチが必要だと思います。

于 2012-08-01T10:14:36.937 に答える