HTML ページの読み込みと解析プロセスの詳細な紹介-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML ページの読み込みと解析プロセスの詳細な紹介

高洛峰

Feb 09, 2017 pm 05:31 PM

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

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

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

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

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

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

JS の読み込み

1. ダウンロードと解析を並行して実行できません (ダウンロードのブロック)。

2. JSが参照されると、ブラウザはJSリクエストを送信し、リクエストが返されるのを待ちます。ブラウザーには安定した DOM ツリー構造が必要であり、JS には、document.write や appendChild を使用したり、location.href を直接使用してジャンプしたり、DOM ツリー構造を直接変更する

コードが存在する可能性が非常に高いためです。ブラウズ JS が DOM ツリーを変更しないようにするには、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 コードの読み込みを開始し、タグ内に外部 CSS ファイルを参照するタグがあることを確認します。

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

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

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

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

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