HTMLページのロードと解析のプロセス
1.ユーザーがURLを入力し（これがhtmlページであり、最初のアクセスであると想定）、ブラウザーがサーバーにリクエストを送信し、サーバーがhtmlファイルを返します。
2.ブラウザーがHTMLコードのロードを開始し、外部CSSファイルを参照する<head>タグ内に<link>タグがあることを検出します。
3.ブラウザがCSSファイルに対して別のリクエストを発行し、サーバーがCSSファイルを返します。
4.ブラウザーは引き続きHTMLの<body>部分にコードをロードし、CSSファイルが利用可能になり、ページのレンダリングを開始できます。
5.ブラウザーはコード内の画像を参照する<img>タグを見つけ、サーバーにリクエストを送信します。現時点では、ブラウザは画像がダウンロードされるまで待機せず、コードのレンダリングを続行します。
6.サーバーは画像ファイルを返します。画像は特定の領域を占め、次の段落の配置に影響するため、ブラウザはコードのこの部分に戻って再レンダリングする必要があります。
7.ブラウザは、Javascriptコードの行を含む<script>タグを見つけ、すぐに実行しました。
8. JavaScriptスクリプトはこのステートメントを実行し、コード内の<style>（style.display =” none”）を非表示にするようブラウザーに指示します。カップ、突然そのような要素がなくなったので、ブラウザーはコードのこの部分を再レンダリングする必要があります。
9.ついに</ html>の到着を待ち、ブラウザが突然破裂しました...
10.待って、まだ終わっていません。ユーザーがインターフェースの「スキン」ボタンをクリックしました。Javascriptによってブラウザが少し変更されました<link>ラベルのCSSパス。
11.ブラウザがここに全員を呼び出しました<div> <span> <ul> <li> 私たちは、「全員パックとパック、また来なければならない...」と、ブラウザーはサーバーに新しいCSSファイルを要求し、ページを再レンダリングしました。
したがって、通常、cssはヘッドタグに配置され、js参照は最後に配置されます。
リンクはdomツリーの生成をブロックしませんが、ペイントをブロックします（それはレンダーツリーの場合もあります）個人的には、リンクがcssツリーをブロックしているため、ペイントの遅延が発生しているはずです
スクリプトタグは確実にdomの解析をブロックします。ブラウザーがこのタグを検出すると、ダウンロードして内部のコンテンツを実行してから、次のdomの解析を続行します。2つの解決策があります。 1つは、createElementを使用して動的にスクリプトを作成することです。