Webページがブラウザに表示されるまでに何が起こるのか？

中身と関係のない質問で恐縮なのですが、図って何かツールを使って書いてますか？めちゃくちゃきれいだったので気になりました。

HTMLレンダリングあたりの記述が若干甘いところがあります。例えば

それが終わったら、今度は Scripting という処理に入ります。

という記述がありますが、この記述だとHTMLが完全に読み込まれた後にJSが走ってしまうと誤解しがちです。実際には、読み込みの途中で、部分的に後続のフェーズが走り、一部が表示されている間に、残りのコンテンツが届いたりしています。

このとき一番最初に取得されるリソースは、HTMLファイル です。

これも気になります。一番最初に取得されるのが必ずしもHTMLファイルだけではなく、他の場合、例えば画像やPDFの場合もあります。というか、ユーザがブラウザを通じてサーバーに要求したリソースが読み込まれるので..

以上ご存知の内容だとは思いますが、ここも「ページを表示するまで」というタイトルである以上、重要かと思いコメントいたしました。

サーバ側でJSONデータを用意して、ブラウザに返す

とありますが、ここではJSONデータのみじゃなく、XML等でも利用できますので、「サーバがデータを用意してブラウザに返す」のみの記述でいいのではと思います。

とてもわかり易かったです。ありがとうございます。

細かいところで恐縮ですが、一点だけコメントさせてください。 「httpリクエストの送信」において、curlコマンドの出力を用いてリクエストラインの解説をされている部分についてです。

HTTP/2通信となっているようですが、HTTP/2はリクエストラインを持ちません（Curlは出力上、リクエストライン家のように出力しています。。。）。通信上は、HTTP/1.1におけるリクエストラインに相当する部分は、疑似ヘッダという形でHEADERSフレームに格納されます。ボディはDATAフレームに格納されます。

Wiresharkで確認すると次のとおりです。メソッドやPATHが :method, :path としてヘッダかのようになっていることが確認できると思います。

説明と合致させるために、curlに--http1.1をするのは如何でしょうか。

図も分かりやすく素晴らしい記事でした。

レンダリングガチ勢やTCPチョットワカルな人にもこの題材で記事書いてみてほしい。
絶対面白い。読みたい。