ブラウザ上でのページのレンダリングにかかる時間を最短にする方法についての記事では、以下の側面について見ています：
- 効率的なCSSコードを書く
- css表現を避ける
- cssファイルをページ上部に配置
- ページイメージのサイズ指定
- ページのヘッダーは文書コードを示します。
一つは、効率的なCSSコードを書くことです。
まず、ブラウザがhtmlコードを解析するプロセスは明確です。domツリーが構築され、ページに表示される要素がこのdomツリーに作成されます。新しい要素がdomツリーに追加されるたびに、ブラウザはcssエンジンを通じてcssスタイルシートをチェックし、要素にマッチするスタイルルールを見つけて要素に適用します。cssエンジンはスタイルシートを検索し、各ルールを右から左の順にマッチさせます。
プロセスを理解し、あなたは2つの側面からCSSコードを最適化することができます見ることができます：1、CSSスタイルルールの数の定義は少ないほど良いので、不要なスタイルの定義でCSSファイルを削除するために急いで、2、セレクタが書かれている方法の各ルールの選択を最適化し、可能な限りCSSエンジンは、ルールが現在の要素に適用する必要があるかどうかを見てみましょうので、エンジンはあまり不要な回り道を行くように。
例えば、以下のような非効率的なcssの書き方です：
body * {...}
hide-scrollbars * {...}
b, キーセレクタとしてラベルを使用
ul li a {...}
#footer h3 {...}
* html #atticPromo ul li a {...}
c, 蛇の文体
ul#top_blue_nav {...}
form#UserLogin {...}
d, :hover 疑似クラスを接続されていないタグに追加してください。
h3:hover {...}
.foo:hover {...}
#foo:hover {...}
div.faa :hover {...}
最適化の推奨
a,ワイルドカードの使用は避けてください；
b, ルールが現在の要素に適用されるかどうかをCSSエンジンが素早く識別できるようにします: idまたはclassセレクタを多く使い、タグセレクタを少なくします；
c, idとclass、tagとclassを一緒に書いてリストを増やさないでください；
d、子孫セレクタの使用を避けるようにしましょう。不要な祖先要素を削除するには、子孫セレクタの代わりにクラス・セレクタを使用することを検討してください；
/*順序のないliと順序のあるliで異なる色を定義するには、次のように書く：*/
ul li {color: blue;}
ol li {color: red;}
/*定義がより効率的になるように、liにclassを追加する：*/
.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}
e, :hover 疑似クラスを連結していないタグに追加することは避けてください。
2つ目は、CSS表現を使わないことです。
css式はieブラウザでのみ動作し、マイクロソフトはie8以降、ページのパフォーマンスに深刻な影響を与えるため、その使用を推奨していません：ウィンドウのサイズ変更イベントやマウスの移動など、何らかのイベントがトリガーされるたびに、css式は再計算されます。
三つ目は、cssファイルをページの一番上に置くことです。
アウトバウンドスタイルシートやインラインスタイルシートをボディセクションに配置すると、ブラウザはすべてのスタイルシートのダウンロードが完了してからページの残りの部分のダウンロードを続行するため、ページのレンダリング速度に影響を与える可能性があります。さらに、インライン・スタイル・シートは、ページの再レンダリングを引き起こしたり、非表示になっているページの特定の要素を表示したりすることがあります。
第四に、ページイメージのサイズを指定します。
ページイメージのサイズを指定し、イメージの実際のサイズに準拠するには、ページ構造の変更の影響によって引き起こされるサイズの変更を避けることができますので、ページのレンダリング速度を高速化するために有益です。
5、文書コードと書かれたページの先頭
HTMLドキュメントは、ドキュメントのエンコーディングに関する情報を含むデータのストリームとしてネットワーク経由で送信されます。ページのエンコーディングは通常、HTTP レスポンスのヘッダー情報か、ドキュメント内の ML タグで指定されます。クライアントのブラウザは、ページのエンコーディングが決定された場合にのみページを正しく
最適化の推奨
a, HTTPヘッダ情報でページのエンコーディングを示すようにします。oxのようなブラウザは、HTTPヘッダ情報でエンコーディング情報を取得すると、不要なデータバッファリング時間を短縮するためにプリバッファリングデータを少なくします；
b, HTMLの<head>セクションにエンコーディング情報を記述します；
c、文書にエンコーディングを割り当てるのに慣れてください；
HTTPヘッダ情報とMLマークアップの両方でエンコーディングを指定する場合は、エンコーディング情報が一貫していることを確認する必要があります。
