Webpage DOM and Rendering

[André Henriques]

Hello, 

After building the project,  I am debugging it to find where is processed the page content. Where in project is processed the page content structure and positioning of each element?

Thank you in advance! 

[Ian Clelland]

On Mon, Aug 21, 2023 at 4:49 PM André Henriques <andre...@gmail.com> wrote:

Hello, 

After building the project,  I am debugging it to find where is processed the page content. Where in project is processed the page content structure and positioning of each element?

This is a large part of what a web browser does, and a significant portion of Chromium's source code is dedicated to this. There's not a short and easy answer to that question.

Specifically, Blink (which you can find under third_party/blink) is Chromium's rendering engine. Blink handles most of the processing of page content, from parsing HTML and CSS to laying out elements on the page and painting them. This is still huge, though: there are over 850,000 lines of code just in third_party/blink/renderer/core/{html,css,dom,style,layout,paint}.

A good place to start, if you want to understand how it all works, and how Chromium can turn an HTML document into pixels on the screen, is the "Life of a Pixel" talk (on youtube at https://youtu.be/K2QHdgAKP-s). I'd highly recommend watching that, and coming back here with more specific questions afterwards if you have any.

 

Thank you in advance! 

--
--
Chromium Developers mailing list: chromi...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-dev
---
You received this message because you are subscribed to the Google Groups "Chromium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-dev...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-dev/12e7976a-15e5-44d2-9e35-e85161cbc4can%40chromium.org.

[André Henriques]

Thank you Ian for your quick reply! I will watch it again in more detail trying to match with the code. 

Regards, 

André