P246 visibilityCSSプロパティとdisplayCSSプロパティの違い

CSSには、DOM要素を視覚的に隠す方法が2つある。
・visibilityCSSプロパティをhiddenに設定する
・displayCSSプロパティをnoneに設定する
Layoutの対象となるDOM要素を減らすには display:noneを選択すること。

visibilityCSSプロパティの値をhiddenに設定することで要素を不可視状態にされるが、要素が占めている領域そのものは確保を行おうとします。そのため、領域そのものの高さや大きさや座標を必要とするため、Layoutは行われる。ペイント処理は行われないが、Layout処理などは行われる。

displayCSSプロパティは、要素がレンダリングされる際に利用される矩形の種類を指定する。noneを指定することで、要素をレンダリングの対象から外せる。