"CSSのチューニングで目指すべきは、レイアウトや描画処理のコストをいかにして低くするか、というものになる。"

HTML5 Boilerplateの開発者でGoogleのエンジニア、ポール・アイリッシュに聞くCSS高速化テクニック - builder

0リアクション

"CSSのパフォーマンスチューニングというと、CSSセレクタの記述方法が必ず話題として挙げられるが、現在のブラウザにおいては十分に高速化されているため、それほど大きな効果は期待できない。"

HTML5 Boilerplateの開発者でGoogleのエンジニア、ポール・アイリッシュに聞くCSS高速化テクニック - builder

2 リアクション

"まず、HTMLをパースしてDOMツリーを、CSSをパースしてCSSOM(CSSオブジェクトモデル)を構築する。それらの結果から、画面に描画するオブジェクトのツリー構造(Render Tree)を構築した後それらをレイアウトし、そして画面への描画処理を行う。"

HTML5 Boilerplateの開発者でGoogleのエンジニア、ポール・アイリッシュに聞くCSS高速化テクニック - builder

3 リアクション

つかってみよう!Yeoman 〜HTML5 Webアプリ開発を効率化するツールの紹介〜

上半期トップ5入り間違いなしの良スライド。

1 リアクション

"リクエスト数を減らすために、スプライト画像を使うのはごく当たり前の事ですので、受け取ったPSDを元に透過有り(png)と透過無し(jpg)の2枚のスプライト画像を作成して、ページ全体のリクエスト数を10本程度まで抑えております。"

Flashで作るスマフォブラウザゲーム向けアニメーション|1 pixel|サイバーエージェント公式クリエイターズブログ

0リアクション

Defensive Sass Examples - a collection by John W. Long - CodePen

あとで見る。

0リアクション

"そんな時はposition:absoluteを指定し、変更が及ぶ範囲をアニメーションしている要素だけに限定することで、他の要素のレイアウトへの影響を最小限に抑えることができます。"

Layout、Paintingとは何か?レンダリングから学ぶWebサイトのパフォーマンス | Dress Cording

0リアクション

"position:fixedによる固定レイアウトは負荷がかかる"

Layout、Paintingとは何か?レンダリングから学ぶWebサイトのパフォーマンス | Dress Cording

0リアクション

"ブラウザは賢いので変更が生じた際、なるべく変更を最小限に抑えようとします。
例えば要素を非表示にするためにvisiblity:hiddenを指定するとpaintingが発生します。ところがdisplay:noneを指定するとLayoutとPaintingの両方が発生してしまいます。つまり位置的な変更がなされるdisplay:noneの方が負荷が高いわけです。"

Layout、Paintingとは何か?レンダリングから学ぶWebサイトのパフォーマンス | Dress Cording

4 リアクション