HTML ページの読み込みと解析プロセスの詳細_HTML/Xhtml_Web ページの制作

ブラウザが 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 テキストを使用すると、一部の画像をテキストのみに完全に置き換えることができます。

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

8. コンテンツをチャンクします:

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

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

a. ブラウザーが画像または表のサイズをすぐに判断できる場合は、再実行することなくすぐにページを表示できます。レイアウトの調整作業。

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

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

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

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

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

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

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

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

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

7. ブラウザは、JavaScript コードの行を含む <script> タグを見つけて、それを迅速に実行します。 <br /><br />8. Javascript スクリプトはこのステートメントを実行し、コード内の特定の <style> (style.display="none") を非表示にするようブラウザーに指示します。おっと、突然そのような要素が失われ、ブラウザはコードのこの部分を再レンダリングする必要があります。 <br /><br />9. 最後に の到着を待って、ブラウザが泣き出しました...<br /><br />10. 待って、まだ終わっていません。ユーザーは「スキン変更」ボタンをクリックしました。インターフェイスでは、JavaScript を使用してブラウザが <link> タグの CSS パスを変更できるようにします。 <br /><br />11. ブラウザは全員を呼び出します <div><span><ul><li>、「全員荷物をまとめてください。最初からやり直す必要があります...」、ブラウザはサーバーに新しい CSS の作成を要求します。ファイルを作成してページを再レンダリングします。</script>