ページのレンダリング時間を短縮してページの実行速度を速めます

ブラウザでのページのレンダリング時間をできるだけ短縮するにはどうすればよいでしょうか? この記事は、次の点から始まります。

効率的なCSSコードを書く
CSS式の使用を避ける
CSSファイルをページ上部に配置する
ページ画像のサイズを指定する
ページヘッダーは文書コードを示します

1. 効率的なCSSコードを書く

まず、ブラウザが HTML コードを解析するプロセスを理解します。DOM ツリーが構築され、ページに表示される各要素がこの DOM ツリー内に作成されます。新しい要素が DOM ツリーに追加されるたびに、ブラウザは CSS エンジンを通じて CSS スタイルシートを検索し、要素に一致するスタイルルールを見つけて、それを要素に適用します。 CSS エンジンはスタイルシートを検索し、各ルールを右から左に照合します。

プロセスを理解すると、次の 2 つの側面から CSS コードを最適化できることがわかります。1. 定義される CSS スタイルルールが少ないほど良いので、CSS ファイル内の不要なスタイル定義をすばやく削除します。2. 各ルールのセレクターの記述方法を最適化し、CSS エンジンが、このルールを現在の要素に適用する必要があるかどうかを一目でわかるようにして、エンジンが不要な回り道を回避できるようにします。

たとえば、CSS を記述する非効率的な方法を以下に示します。

a、ワイルドカードをキーセレクターとして使用します（キーセレクターは各ルールの右端のセレクターを参照します）

コードをコピー

コードは次のとおりです。

体 * {...}
.hide-scrollbars * {...}

b. ラベルをキーセレクターとして使用する

コードをコピー

コードは次のとおりです。

ul li a {...}
#フッター h3 {...}
* html #atticPromo は {...} にあります

c、余分な書き込み

コードをコピー

コードは次のとおりです。

ul#top_blue_nav {...}
フォーム#ユーザーログイン {...}

d. :hover 疑似クラスを非リンクタグに追加します。これにより、厳密な doctype を持つページの IE7 および IE8 での表示が非常に遅くなります。

コードをコピー

コードは次のとおりです。

h3:ホバー{...}
.foo:hover {...}
#foo:ホバー{...}
div.faa :hover {...}

最適化の提案:
a. ワイルドカードの使用は避けてください。
b. CSS エンジンが、ルールが現在の要素に適用されるかどうかをすばやく識別できるようにします。ID またはクラスセレクターを多く使用し、タグセレクターを少なくします。
c. id と class、または tag と class を一緒に記述しないでください。
d. 子孫セレクターの使用を避け、不要な祖先要素を削除します。子孫セレクターの代わりにクラスセレクターを使用することを検討してください。

コードをコピー

コードは次のとおりです。

/* 順序なし li と順序あり li に異なる色を定義するには、次のように記述します: */
ul li {色: 青;}
ol li {色: 赤;}
/*liにクラスを追加すると、定義の効率が高くなります: */
.unordered-list-item {色: 青;}
.ordered-list-item {色: 赤;}

e. 接続されていないタグに :hover 疑似クラスを追加しないでください。

2番目に、CSS式の使用を避ける

CSS 式は IE ブラウザでのみ機能します。Microsoft は、ページのパフォーマンスに重大な影響を与える可能性があるため、IE8 以降では CSS 式の使用を推奨していません。ウィンドウのサイズ変更イベントやマウスの移動など、どのようなイベントがトリガーされても、いつでも CSS 式が再計算されます。

3. CSSファイルをページ上部に配置する

本文セクションに外部スタイルシートまたはインラインスタイルシートを配置すると、すべてのスタイルシートがダウンロードされるまでブラウザはページの残りの部分のダウンロードを続行しないため、ページのレンダリング速度に影響します。さらに、インラインスタイルシート (<style> 内に配置されるスタイル) により、ページが再レンダリングされたり、非表示のページに特定の要素が表示されたりすることがあります。インラインスタイルシートは使用しないことをお勧めします。

4番目に、ページ画像のサイズを指定します

ページ画像のサイズを指定する場合は、画像の実際のサイズと一致させる必要があります (サイズを指定して画像を拡大縮小しないでください)。これにより、サイズ変更によるページ構造の変更を回避できるため、ページのレンダリングを高速化できます。

5. ページヘッダーに文書コードを示す

HTML ドキュメントは、ドキュメントのエンコード情報を含むデータストリームの形式でネットワーク経由で送信されます。ページのエンコーディング情報は通常、HTTP 応答のヘッダー情報またはドキュメント内の HTML タグで指定されます。クライアントブラウザは、ページのエンコーディングを決定した後にのみ、ページを正しくレンダリングできます。したがって、ページを描画したり JavaScript コードを実行したりする前に、ほとんどのブラウザ (IE6、IE7、IE8 を除く) は、エンコーディング情報を見つけるために一定数のバイトのデータをバッファリングします。ブラウザによって、事前にバッファリングされるバイト数は異なります。ブラウザが、設定された量のプリバッファリングされたデータを受信した後でページのエンコーディング情報を見つけられなかった場合、ブラウザは独自に指定したデフォルトのエンコーディングに従ってページのレンダリングを開始します。この時点でページのエンコーディング情報を取得し、それが現在のエンコーディングと一致しない場合は、ページ全体を再レンダリングする必要があり、場合によってはデータの再取得も必要になります。したがって、サイズが 1 KB を超えるページの場合 (さまざまなブラウザでのテストによると、事前バッファリングされるデータの最大量は 1 KB です)、エンコード情報はできるだけ早くマークする必要があります。

最適化の提案:
a. HTTP ヘッダー情報にページコードを示すようにします (これはサーバー側で設定する必要があります)。 Firefox などのブラウザは、HTTP ヘッダーでエンコーディング情報を取得すると、事前にバッファリングするデータが少なくなり、不要なデータバッファリング時間が短縮されます。
b. HTML の <head> セクションにエンコーディング情報を指定します。
c. ドキュメントにエンコーディングを割り当てることに慣れる。
d. ページに指定されたエンコーディングは、ページの実際のエンコーディングと一致する必要があります。HTTP ヘッダー情報と HTML タグの両方でエンコーディングを指定する場合は、エンコーディング情報が一貫していることを確認してください。

注:この記事は、Google ドキュメントの本来の意味に沿って完全に翻訳されたものではありません。翻訳されたテキストは、私自身の理解と組み合わせて表現されています。誤りを見つけた場合は、修正していただければ幸いです。

<<: フォーム送信ページの更新がジャンプしない

>>: MySQL ディープページング (数千万のデータを素早くページ分割する方法)