画面が出るまでの12段 — 5段モデルはどこから来たのか

ここで大事なのは、5段モデルを「間違い」と断じないことです。分かっているのは出所です。

語                        Chromium設計文書  HTML仕様     web.dev 2014年記事  ほかの出所
CSSOM                     0件               参照あり     あり                W3C 仕様名(2011年)
render tree               0件               0件          あり                WebKit(2007年)
Critical Rendering Path   0件               0件          あり                -
reflow                    0件               0件          あり(layoutの別名)  Gecko の段名

4語とも、RenderingNG の全ページ・Chromium ソース内の docs/how_cc_works.md と paint の README・CSS Will Change 仕様のいずれにも1回も出てきません。HTML Living Standard でも render tree・Critical Rendering Path・reflow は0件ですが、CSSOM だけは参照する仕様の名前として出てきます(CSSOM defines what happens when the attribute is dynamically set, changed, or removed.)。

4語を揃えて使っているのは web.dev の連載記事です。公開日は 2014年3月31日。「Render-tree Construction, Layout, and Paint」にはこうあります。

The DOM and CSSOM trees combine to form the render tree.

「Constructing the Object Model」にはこうあります。

DOM and CSSOM are independent data structures.

5ステップのまとめは、前者の記事にあります。

Process HTML markup and build the DOM tree. Process CSS markup and build the CSSOM tree. Combine the DOM and CSSOM into a render tree. Run layout on the render tree to compute geometry of each node. Paint the individual nodes to the screen.

この5ステップは DOM → CSSOM → render tree → layout → paint で、Composite は出てきません(連載3本で composit を含む語は0件)。Composite まで入った型は、web.dev の別記事「Rendering performance」の JS / CSS > Style > Layout > Paint > Composite です(最終更新 2023-12-13。初出の年は確かめられていません)。Parse から Composite までをこの並びで書いた出所は、探した範囲では特定できていません。 一方、公式が Layout の出力として挙げるのは render tree ではなく the immutable fragment tree です。

reflow は同じ記事に1箇所だけ出てきます。

that's the "layout" stage, also known as "reflow."

この語は Firefox(Gecko)では現役の段名で、Layout Overview は Reflow is the process of computing the positions and sizes of frames. と書いています。Chromium 公式の呼称は Layout です。