JSはBodyの一番下に置く必要があるのでしょうか？ _html/css_WEB-ITnose

1. インタビューの質問から始めましょう

フロントエンドの人々にインタビューするとき、私は常識と思われる質問をするのが好きです。例: なぜ一般的に のようなコードを本文の最後に置くのでしょうか? (コミュニケーションの効率化のため、すべての議論はChromeを例として使用することを事前に相手に同意します)

申請者は通常次のように答えます: なぜなら、ブラウザがDOMツリーを生成するとき、ブラウザはHTMLコード行を次のように読み込むからです。行の最後に script タグが配置されますが、前のページのレンダリングには影響しません。

愚かな質問をしました: DOM ツリーが完全に生成されるまでページはレンダリングできず、完全な DOM ツリーを生成するにはブラウザがすべての HTML を読み取る必要があるため、script タグが体の底？

最初に考えられるように空白を残してください

「ページがレンダリングされる」とはどういう意味ですか?

厳密に言うと、私の最後の質問は曖昧です。私たちがよく言う「ページがレンダリングされる」ということを統一する必要があります。これは「最初の画面が表示される」または「ページが完全に読み込まれる」ことを指します（以下、総称して「ページがレンダリングされる」と呼びます）。ステップC)として?それが表示されている最初の画面を指す場合は、再び疑問が生じます。Web ページの最初の画面に写真があると仮定すると、ここでの「最初の画面」は「すべての写真が表示されている最初の画面」を指します (以下、総称してこの画面と呼びます)。からステップB）または「写真なし」「最初の画面」（以下、総称してステップAと呼びます）。

「ページがレンダリングされる」が StepA、StepB、StepC のどれを指しているのかを確認することが非常に重要です (ただし、これを試みた候補者はまだいません)。ステップ C、つまり、私の最後の質問に対する答えは「はい」です。本文の下部に script タグを配置しなくても、ページの完全な読み込み時間は遅くなりません。

明らかに、私たちは最初の画面時間のほうを気にする傾向があるため、「ページがレンダリングされる」が特に「画像のない最初の画面」を指す場合、私の最後の質問は次のようになります。どう答えるべきでしょうか?

「絵のない最初の画面」はDomツリーが完全に生成されるまで表示できず、完全なDomツリーを生成するにはブラウザがHTMLを全て読み込む必要があるため、スクリプトタグを体の底？

罠

ただし、上記の問題にはまだ罠があります。Dom ツリーが完全に生成された後にのみ Dom ツリーを表示できるため、この文は欺瞞的であり、「写真のない最初の画面」は表示されません。 「完全なDomツリー」が必要条件です。つまり、Dom ツリーの生成時に一定の条件が満たされていれば、「絵のない最初の画面」を表示することができます。

それで、これらのあいまいさや落とし穴はさておき、私の質問は次のようになります:

script タグの位置は最初の画面時間に影響しますか?

ただし、その答えはブラウザのレンダリング メカニズムから始まります。 (もう一度言います: この記事で言及されているブラウザはすべて Chrome を指します)

2. ブラウザのレンダリング メカニズム

まず、いくつかの概念を理解する必要があります:

1. DOM: ドキュメント オブジェクト モデル。ブラウザは、解析された HTML を次の形式に変換します。 DOM と呼ばれるツリー状のデータ構造。

2. CSSOM: CSS オブジェクト モデル。ブラウザは CSS コードをツリー状のデータ構造に解析します。

3. DOM と CSSOM は両方とも、バイト → 文字 → トークン → ノード → オブジェクト モデルの方法で最終データを生成します。以下の図に示すように:

DOM ツリーの構築プロセスは深いトラバーサル プロセスです。現在のノードのすべての子ノードが構築された後でのみ、現在のノードの次の兄弟ノードが構築されます。

4. レンダー ツリー: 以下に示すように、DOM と CSSOM がマージされてレンダー ツリーが生成されます:

レンダー ツリーは、DOM と同様に、各ノードの CSS 属性、ノード自体の属性、およびノー​​ドを保存します。マルチツリー子ノードの形式。

注: display:none のノードはレンダー ツリーに追加されませんが、visibility: hidden のノードは追加されます。そのため、ノードが最初に表示されない場合は、display:none に設定することをお勧めします。詳細については、こちらをご覧ください

ブラウザのレンダリングプロセス:

1. DOMを作成/更新し、css/image/jsをリクエストします: ブラウザがHTMLコードをリクエストした後、DOM生成の最初の段階で(バイト → 文字である必要があります)、HEAD にあるかどうかに関係なく、css、画像、および js のリクエストを並行して開始します。

注: js ファイルのダウンロード リクエストを開始するには、スクリプト ノードに対する DOM 処理は必要ありません。ただし、これは必ずしも通常のマッチングを介する必要はありません:)。これは、レンダリングの仕組みを理解する際に多くの人が抱いている誤解です

2. レンダー CSSOM の作成/更新: CSS ファイルのダウンロードが完了し、CSSOM の構築が開始されます

3. レンダー ツリーの作成/更新: すべての CSS ファイルがダウンロードされ、CSSOM の構築が完了すると、DOM とともにレンダー ツリーが生成されます。

4. レイアウト: Render Tree を使用すると、ブラウザは Web ページ内にどのノードがあるか、各ノードの CSS 定義とその所属をすでに認識できます。次のステップは Layout と呼ばれ、その名前が示すように、画面上の各ノードの位置を計算します。

5. ペイント: レイアウトの後、ブラウザーは、どのノードが表示されるか (どのノードが表示されるか)、各ノードの CSS 属性 (計算されたスタイル) は何か、各ノードの位置は何かをすでに知っています。画面上のどこにありますか？最後のステップ: ペイント では、計算されたルールに従って、グラフィック カードを介してコンテンツを画面に描画します。

上記の 5 つのステップのうち最初の 3 つのステップはすべて「作成/更新」を使用します。これは、JS による DOM または CSS プロパティの変更など、最初のペイント後に DOM、CSSOM、およびレンダー ツリーが更新される可能性があるためです。

DOM と CSSOM の更新に加えて、レイアウトとペイントも繰り返し実行され、画像のダウンロード後に Web ページを更新する必要があります。

タイムラインを見ると一目瞭然です

Youzan の PC ホームページからコードをローカル コンピューターにコピーし、Node を通して実行しました。サーバーとして、Node は /js/jquery.js の戻りを 2 秒遅らせ、