ブラウザでのページのレンダリング時間をできるだけ短縮するにはどうすればよいでしょうか? この記事は、次の点から始まります。
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 {...} 最適化の提案: コードをコピー コードは次のとおりです。/* 順序なし 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 です)、エンコード情報はできるだけ早くマークする必要があります。 最適化の提案: 注:この記事は、Google ドキュメントの本来の意味に沿って完全に翻訳されたものではありません。翻訳されたテキストは、私自身の理解と組み合わせて表現されています。誤りを見つけた場合は、修正していただければ幸いです。 |
>>: MySQL ディープ ページング (数千万のデータを素早くページ分割する方法)
原則: まず入力要素を非表示にし、次に CSS を使用してラベル要素のスタイルを設定します (他の要...
この記事では、参考までに、jsで書かれたシンプルなスネークゲームの具体的なコードを紹介します。具体的...
困り果てて、ふと、私がよく行くSinaのタッチスクリーン版はどうやって作られているのだろう?と考えま...
opencv2 の簡単なインストール: conda インストール --channel https:/...
目次1. SELinux の紹介2. SELinuxの基本概念2.1 仕事の種類2.2. セキュリテ...
1. コマンドの紹介contab (cron テーブル) コマンドは、Windows のスケジュール...
突然、MySQLにログインすると、アクセスが拒否されたか、データベースに接続できないと表示されました...
序文JavaScriptはWebフロントエンドで広く使われている言語の一つであり、Webアプリケーシ...
導入JavaScript はデフォルトでシングルスレッドであるため、コードは並列実行するための新しい...
関連する依存関係をインストールするnpm i lib-flexible --save npm i p...
目次コンポーネント通信の概要コンテンツ3つの方法まとめコンポーネントコミュニケーション - 父から息...
問題の説明MySQL が正常に起動しました。以下に示すように、 ps -ef |grep mysql...
インターネット上には Linux サーバーを監視するためのツール、コンポーネント、プログラムが多数あ...
序文binlog は、MySQL のすべての追加、削除、および変更ステートメントを記録するバイナリ ...
展開環境: ここでは docker コンテナ、Linux システム、VmWare 仮想マシンが使用さ...