本を読んでレンダリングの大まかな流れを勉強しました。
レンダリングの大まかな流れは以下で記載されているものと同じです。
https://qiita.com/mikimhk/items/7cfbd6c94d0f3d7aa51f#3-rendering
（リンクにて参考にさせていただきます。）
個人的解釈
この
Loading⇒Scripting⇒Rendering⇒Painting（これらをまとめてフレームと呼ぶ）
を読んだときなるほどなぁと思っていたのですが、こんなにはっきりと段階が分かれていたら
- Paintingが一つしかなければ全てが同時に画面上に描画されることになる。
-
</body>の直前に重い外部javascriptを読み込ませるとDOM構築完了イベントが発生する前に画面描画が始まっているケースもある。 - スクリプトの読み込みなんてヘッダ内でも
</body>の直前に置いたって差が出るわけがない。
というようなことを思いました。
参考
「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で色々試してみましたが、結局上から読んでいって描画しているという理解で問題なさそうです。
自分自身よくわかっていませんので、コメントいただけるとありがたいです。