HTML ページの原則と最適化 rendering_html/css_WEB-ITnose

HTML Web ページを読み込む大まかなプロセス

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

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

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

4. ブラウザは のコードの読み込みを続け、CSS コードが取得され、インターフェイスのレンダリングが開始されます。

5. ブラウザは、画像を参照するコード内で タグを見つけ、画像がダウンロードされるまで待機せずに、次のコードのレンダリングを続けました。

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

7. ブラウザは js コード内に <script> の行を見つけ、それをすぐに実行しました。 </p> <p> 8.js スクリプトはこのステートメントを実行し、ブラウザーに特定の <div> を非表示にするように指示します。要素が 1 つ欠落しているため、ブラウザーはコードのこの部分を再レンダリングする必要があります。 </p> <p>9. 最後に </html> の戻りを待っていると、ブラウザが泣き出しました。 </p> <p>10. まだ終わってないよ。ユーザーがインターフェースのスキン変更ボタンをクリックすると、js によってブラウザーが <link> の CSS タグを変更します。 </p> <p>11. ブラウザは、</p> <div><span><ul><li> の全員を呼び出し、「全員荷物をまとめてください。最初からやり直さなければなりません...」と、ブラウザはサーバー ファイルから新しい CSS を要求し、再度ページをレンダリングします。 <p> js のブロック特性: <br></p> <p> その中で、ブラウザが js をロードするとき、ブラウザが js コードを実行するとき、つまり、<script> が表示されるたびに、js は読み込みをブロックします。ページは、スクリプトの解析と実行を待機させられます。js コードが実行された後、ページはレンダリングされ続けます。ただし、新世代のブラウザは並列ダウンロードをサポートしています。ただし、js をダウンロードしても、他のリソース (画像など) のダウンロードはブロックされます。したがって、js はページの下部に配置する必要があります。 </script>

JS の最適化:

1. 効率的なセレクターを使用します。

2. セレクターをローカル変数として保存します

3 最初に操作してから表示します。