ホームページ > 記事 > ウェブフロントエンド > ブラウザが HTML をロードしてレンダリングする順序
ブラウザが HTML をロードしてレンダリングする順序
- Y2Jオリジナル
- 2017-05-24 09:14:593094ブラウズ
ブラウザが 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 の
5. ブラウザは、画像を参照するコード内で
6. サーバーは画像ファイルを返します。画像は特定の領域を占め、後続の段落の配置に影響を与えるため、ブラウザはコードのこの部分に戻って再レンダリングする必要があります。
7. ブラウザは JavaScript コード行を含む