本-Webフロントエンドハイパフォーマンスチューニング

P247 img要素のサイズは固定化する

img要素は、あらかじめ大きさを指定することで余計なLayoutを避けることができる。 img要素の大きさを指定しない場合には、画像が読み込まれていない段階では、仮の大きさで一度Layoutが行われる。画像が読み込まれ次第要素の大きさが変わることになるので、…

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

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

P221 CSSのマッチング順位

マッチングの際にはCSSセレクタは右から左に向けて処理が行われる。 CSSセレクタの記述を詳細にすればするほどマッチング処理は短くなると直感的に考える開発者がいるかもしれません。 しかし、実際にはセレクタの記述を増やせば増やすほどそれのマッチング…