ブラウザが HTML をロードしてレンダリングする順序-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

ブラウザが HTML をロードしてレンダリングする順序

Y2J

May 24, 2017 am 09:14 AM

html ページの読み込み

ブラウザが HTML をロードしてレンダリングする順序、HTML ページのロードを高速化する方法、HTML ページのロードと解析プロセスなどについては、この記事で詳しく紹介しますので、興味のある方はお見逃しなく。

ブラウザがHTMLをロードしてレンダリングする順序

1. IEのダウンロード順序は上から下であり、レンダリングの順序も上から下に同時に実行されます。

2. ページの特定の部分をレンダリングすると、その上のすべての部分がダウンロードされます (これは、関連するすべての要素がダウンロードされたことを意味するわけではありません)。

3. 意味的に解釈可能なタグ埋め込みファイル (JS スクリプト、CSS スタイル) が見つかった場合、IE のダウンロードプロセスによりダウンロード用の別の接続が有効になります。

4. スタイルシートがダウンロードされると、以前にダウンロードされたすべてのスタイルシートと一緒に解析され、以前のすべての要素 (以前にレンダリングされた要素を含む) が再レンダリングされます。

5. JSやCSSで再定義がある場合、の後に定義された関数は前に定義された関数を上書きします。 JS の読み込み

1. ダウンロードと解析を並行して実行できません (ダウンロードのブロック)。
2. JS を
参照する場合、ブラウザは JS リクエストを送信し、リクエストが返されるのを待ちます。ブラウザーには安定した DOM ツリー構造が必要であり、
document
.write や appendChild を使用したり、直接使用したりするなど、DOM ツリー構造を直接変更する

コードが JS 内に存在する可能性が非常に高いためです。 location.href ジャンプ。JS が DOM ツリーを変更しないようにするには、ブラウザが他のダウンロードとレンダリングをブロックする必要があります。 HTML ページの読み込みを高速化する方法 1.減量:

a. ページの重量は、読み込み速度に影響を与える最も重要な要素です。

b. 不要なスペースとコメント
を削除します。

c. インラインスクリプトとCSSを外部ファイルに移動します。

d. HTML Tidy を使用して HTML をスリム化することも、いくつかの圧縮ツールを使用して
JavaScript をスリム化することもできます。 2. ファイルの数を減らす:
a. ページで参照されるファイルの数を減らすと、HTTP 接続の数を減らすことができます。

b. 多くの JavaScript および CSS ファイルはマージでき、Caibangzi は JavaScript 関数と Prototype.js を Base.js ファイルにマージするのが最適です。
3. ドメイン名クエリ
を減らす:

a. DNS クエリとドメイン名解決にも時間がかかるため、外部 JavaScript、CSS、
画像
などのリソースへの参照を減らす必要があります。異なるドメイン名を使用するほど良いでしょう。

4.
データを再利用する: a. 再利用されたデータをキャッシュします。

5. ページ要素の読み込み順序を最適化します: a. 最初にページに最初に表示されるコンテンツとそれに関連する JavaScript と CSS を読み込み、次に画像、フラッシュ、
などの HTML 関連のものを読み込みます。最初は表示されないビデオ
非常に太いリソースが最後に読み込まれるまで待ちます。 6. インライン JavaScript の数を減らす:

a. ブラウザーのパーサーは、インライン JavaScript によってページ構造が変更されると想定するため、インライン JavaScript を使用するとコストが高くなります。

b. コンテンツの出力には document.write() を使用せず、最新の
W3C
DOM メソッドを使用して最新のブラウザー用のページコンテンツを処理します。 7. 最新の CSS と合法的なタグを使用します:

a. 最新の CSS を使用してタグと画像を削減します。たとえば、最新の CSS とテキストを使用すると、一部の画像をテキストのみに完全に置き換えることができます。

b. HTML の解析時にブラウザが「エラー修正」などの操作を実行しないようにするには、正当なタグを使用します。また、HTML Tidy を使用して HTML をスリム化することもできます。

8. コンテンツをチャンクします。 a. ネストされたテーブルを使用せず、ネストされていないテーブルを使用します。大きなネストされたテーブルに基づくレイアウトを複数の小さなテーブルに分割すると、表示する前にページ全体 (または大きなテーブル) のコンテンツが読み込まれるまで待つ必要がなくなります。

9. 画像と表のサイズを指定します:

a. ブラウザーが画像または表のサイズをすぐに決定できる場合は、レイアウトの調整をやり直すことなく、すぐにページを表示できます。

b. これにより、ページの表示が高速化されるだけでなく、ページの読み込み完了後の不適切なレイアウト変更も防止されます。

c. 画像は
高さ
と
幅
を使用します。

HTML ページの読み込みと解析プロセス

1. ユーザーが URL を入力し (それが HTML ページであり、初めての訪問であると仮定します)、ブラウザーがサーバーにリクエストを送信し、サーバーは HTML ファイルを返します。

2. ブラウザは HTML コードの読み込みを開始し、<head> タグ内に外部 CSS ファイルを参照するタグがあることを検出します。

3. ブラウザが CSS ファイルのリクエストを再度送信し、サーバーが CSS ファイルを返します。

4. ブラウザは HTML の部分のコードを読み込み続け、CSS ファイルが取得され、ページが表示されます。

5. ブラウザは、画像を参照するコード内でタグを見つけて、サーバーにリクエストを送信します。この時点で、ブラウザは画像がダウンロードされるまで待機せず、後続のコードのレンダリングを続行します。

6. サーバーは画像ファイルを返します。画像は特定の領域を占め、後続の段落の配置に影響を与えるため、ブラウザはコードのこの部分に戻って再レンダリングする必要があります。

7. ブラウザは JavaScript コード行を含む