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

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

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

  • 効率的な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 ディープ ページング (数千万のデータを素早くページ分割する方法)

推薦する

CSS3 を使用して入力複数選択ボックスのスタイルをカスタマイズする例

原則: まず入力要素を非表示にし、次に CSS を使用してラベル要素のスタイルを設定します (他の要...

jsを使用して簡単なスネークゲームを書く

この記事では、参考までに、jsで書かれたシンプルなスネークゲームの具体的なコードを紹介します。具体的...

メタビューポートはiPhoneでウェブページをフルスクリーン表示コントロールします

困り果てて、ふと、私がよく行くSinaのタッチスクリーン版はどうやって作られているのだろう?と考えま...

UbuntuでOpenCVをコンパイルしてインストールする方法

opencv2 の簡単なインストール: conda インストール --channel https:/...

Linux での SELinux を理解する方法

目次1. SELinux の紹介2. SELinuxの基本概念2.1 仕事の種類2.2. セキュリテ...

Linux crontab コマンドの使用

1. コマンドの紹介contab (cron テーブル) コマンドは、Windows のスケジュール...

Windows が MySQL サービスを開始できず、エラー 1067 を報告する場合の解決策

突然、MySQLにログインすると、アクセスが拒否されたか、データベースに接続できないと表示されました...

JavaScript 型検出方法の例のチュートリアル

序文JavaScriptはWebフロントエンドで広く使われている言語の一つであり、Webアプリケーシ...

Node.js における非同期プログラミングの知識ポイントの詳細な説明

導入JavaScript はデフォルトでシングルスレッドであるため、コードは並列実行するための新しい...

React 構成 px 変換 rem メソッド

関連する依存関係をインストールするnpm i lib-flexible --save npm i p...

Reactコンポーネント通信の詳細な説明

目次コンポーネント通信の概要コンテンツ3つの方法まとめコンポーネントコミュニケーション - 父から息...

MySQL は正常に起動するがポートをリッスンしない場合の解決策

問題の説明MySQL が正常に起動しました。以下に示すように、 ps -ef |grep mysql...

Python ベースの Linux システムにおける特定のプロセスのパフォーマンス監視の考え方の詳細な説明

インターネット上には Linux サーバーを監視するためのツール、コンポーネント、プログラムが多数あ...

MySQLテーブルの内容の変更を監視し、MySQL binlogを有効にする

序文binlog は、MySQL のすべての追加、削除、および変更ステートメントを記録するバイナリ ...

Dockerはクロスプラットフォーム機能を実現するためにnet5プログラムを導入

展開環境: ここでは docker コンテナ、Linux システム、VmWare 仮想マシンが使用さ...