個人的解釈

この
Loading⇒Scripting⇒Rendering⇒Painting（これらをまとめてフレームと呼ぶ）
を読んだときなるほどなぁと思っていたのですが、こんなにはっきりと段階が分かれていたら

というようなことを思いました。

参考
「script要素の記述位置によってページの表示速度が変わる」
https://allabout.co.jp/gm/gc/380498/2/

そこでたどり着いた考え方はこの「フレーム」が複数実行されていくという考え方です。
更に、Loading⇒Rendering⇒PaintingというScriptingを切り離した考え方でも良いかもしれません。

CSSでdisplay:none;を設定していても、初期描画でチラっと見える現象等(FOUC)もありますが、これは描画後にcssを当てているようなのでこれに関しても

Loading⇒Rendering⇒Painting

の1つの流れでは説明できない

①Loading⇒Rendering⇒Painting（HTMLリソースを上からDOMに解釈して、描画）
②Loading⇒Rendering⇒Painting（CSSリソースをロード後解釈して、適用）

と考えれば説明できなくもない

追記：最近のブラウザではlinkでCSSを設定していれば読み込んで解釈するまで描画がブロックされるようなのでFOUCは起こらないみたいです。

（本にはScriptingの説明にDOM操作によりRenderingフェーズやPaintingフェーズを引き起こすがあります。外部のリソースを取得するとLoadingフェーズを引き起こしますとありました）

スクリプトを入れたhtmlで色々試してみましたが、結局上から読んでいって描画しているという理解で問題なさそうです。

自分自身よくわかっていませんので、コメントいただけるとありがたいです。