いいね!
F*CK ALL HATERS.
"CSSのチューニングで目指すべきは、レイアウトや描画処理のコストをいかにして低くするか、というものになる。"
HTML5 Boilerplateの開発者でGoogleのエンジニア、ポール・アイリッシュに聞くCSS高速化テクニック - builder
"CSSのパフォーマンスチューニングというと、CSSセレクタの記述方法が必ず話題として挙げられるが、現在のブラウザにおいては十分に高速化されているため、それほど大きな効果は期待できない。"
HTML5 Boilerplateの開発者でGoogleのエンジニア、ポール・アイリッシュに聞くCSS高速化テクニック - builder
"まず、HTMLをパースしてDOMツリーを、CSSをパースしてCSSOM(CSSオブジェクトモデル)を構築する。それらの結果から、画面に描画するオブジェクトのツリー構造(Render Tree)を構築した後それらをレイアウトし、そして画面への描画処理を行う。"
HTML5 Boilerplateの開発者でGoogleのエンジニア、ポール・アイリッシュに聞くCSS高速化テクニック - builder
上半期トップ5入り間違いなしの良スライド。
"リクエスト数を減らすために、スプライト画像を使うのはごく当たり前の事ですので、受け取ったPSDを元に透過有り(png)と透過無し(jpg)の2枚のスプライト画像を作成して、ページ全体のリクエスト数を10本程度まで抑えております。"
"そんな時はposition:absoluteを指定し、変更が及ぶ範囲をアニメーションしている要素だけに限定することで、他の要素のレイアウトへの影響を最小限に抑えることができます。"
Layout、Paintingとは何か?レンダリングから学ぶWebサイトのパフォーマンス | Dress Cording
"position:fixedによる固定レイアウトは負荷がかかる"
Layout、Paintingとは何か?レンダリングから学ぶWebサイトのパフォーマンス | Dress Cording
"ブラウザは賢いので変更が生じた際、なるべく変更を最小限に抑えようとします。
例えば要素を非表示にするためにvisiblity:hiddenを指定するとpaintingが発生します。ところがdisplay:noneを指定するとLayoutとPaintingの両方が発生してしまいます。つまり位置的な変更がなされるdisplay:noneの方が負荷が高いわけです。"
Layout、Paintingとは何か?レンダリングから学ぶWebサイトのパフォーマンス | Dress Cording