CSS Object Model

[Rowan Collins]

Heya,

I'm trying to research more about how browsers work and I noticed that in Google's documentation they refer to the CSS Object Model:

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model

That seems to be left out of the diagram in "how browsers work" by Tali Garsiel. I'm wondering if that would just be the API connecting to Style Rules / Layout Tree like the DOM connects to the content model in these diagrams?

Gecko:

Webkit:

But also, how do these diagrams differ from the modern blink process? Is it more or less the same flow or have things evolved a little? 

I couldn't find anything that references the CSSOM in the Life of a Pixel powerpoint.

As a background, I'm just doing technical search engine optimization. I'm fascinated in browser rendering and page speed - so I was hoping to get a better grasp of the process to help clients leverage the tech and deliver the best experiences.

Kind Regards,

Rowan Collins

[Chris Harrelson]

Hi Rowan,

On Tue, Jun 1, 2021 at 8:32 AM Rowan Collins <rowan.c...@gmail.com> wrote:

Heya,

I'm trying to research more about how browsers work and I noticed that in Google's documentation they refer to the CSS Object Model:

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model

That seems to be left out of the diagram in "how browsers work" by Tali Garsiel. I'm wondering if that would just be the API connecting to Style Rules / Layout Tree like the DOM connects to the content model in these diagrams?

The CSS Object Model is a way of accessing the computed styles of HTML elements in JavaScript. However, what that article is describing is aspects of the style recalc phase of the rendering pipeline.

 

Gecko:

Webkit:

But also, how do these diagrams differ from the modern blink process? Is it more or less the same flow or have things evolved a little? 

Things have evolved significantly, though many of the boxes above are still important concepts in Chromium.

 

I couldn't find anything that references the CSSOM in the Life of a Pixel powerpoint.

You should think of it as a way for JavaScript to query the results of the style recalc process (called "Reflow" in the Gecko terminology, and the result of "Attachment" in the Webkit diagram. In Chromium we have a Style Recalc phase that goes before generation of the Layout tree (our name for the same thing as the Webkit Render tree).

 

As a background, I'm just doing technical search engine optimization. I'm fascinated in browser rendering and page speed - so I was hoping to get a better grasp of the process to help clients leverage the tech and deliver the best experiences.

 

There are a lot of web.dev articles describing best practices for web sites to render fast. Hopefully they are helpful to you?

(As it happens, I'm also working on some new articles that you may find interesting about the latest technologies in rendering for Chromium, stay tuned...)

[Christian Biesinger]

On Wed, Jun 2, 2021 at 4:54 PM Chris Harrelson <chri...@chromium.org> wrote:

I couldn't find anything that references the CSSOM in the Life of a Pixel powerpoint.

You should think of it as a way for JavaScript to query the results of the style recalc process (called "Reflow" in the Gecko terminology, and the result of "Attachment" in the Webkit diagram. In Chromium we have a Style Recalc phase that goes before generation of the Layout tree (our name for the same thing as the Webkit Render tree).

Just as a clarification, Gecko's equivalent of attachment is called "CSS frame construction"; Gecko's reflow is like our layout.

Christian 

[Chris Harrelson]

Oh right. My mistake, indeed it is like our layout.

 

Christian 

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAPTJ0XGbxDjihMgRFoNbeqxbrLnpwmcQE%3DA80yPkTQcYMExpZA%40mail.gmail.com.

[Rowan Collins]

Thanks all, 

That was super useful and very clear. I’ll definitely keep an eye out for any new articles on web.dev. Pretty much use all that content when explaining to clients.

Thanks again :)!

Kind Regards,

Rowan Collins