How do I look under the covers and see how HTML is rendered?

Question

For example:

<input name="abutton" type="button" value="This is not a button" />

I know this gives me a button. But I also know that someone had to figure out how wide my text was, draw a button of the correct size, place my text in there... etc.

Let's use Mozilla as an example. I did some googling and found this, so I think I'm on the right track. Still, the first sentence says it all:

Page reorganization: The layout engine used in Mozilla (which is known by many names) started off as a project to write a new layout engine for Mozilla and became the layout engine of Mozilla and the foundation for a nearly-complete rewrite in late 1998.

Confusing.

Here is a list of parts I know exist (from that Mozilla page):

• HTML parser and XML parser
• DOM implementation
• CSS parser and style system
• HTML parser and XML parser
• Code for CSS-based and HTML-based layout and rendering

Can someone explain in layman's terms how the Mozilla browser model displays a button?

Answer 1

Hi! So this is actually a really, really complicated question. I worked on the Mozilla project a couple years ago, here's how this works to the best of my recollection:

1. HTML is parsed and into nodes like those specified in the DOM standard. This tree represents the structure of the data in the document.
2. From that DOM tree, another, parallel tree called the frame tree is constructed. This tree represents the visual information in the tree -- things like the box model are implemented here.
3. Once Mozilla's worked out all the interdependencies and has constructed a satisfactory frame tree, the frame tree is pained. There are some steps here (view tree, widget tree) that I believe are now outdated and were rather Mozilla specific anyway. The point is that this frame tree is then handed off to the graphics subsystem (which eventually calls out to the OS) to render.

Most modern browsers layout ("reflow" in Mozilla terms) pages incrementally, so all of this is happening sort of all at once as various resources load in, so that's not totally accurate.

For Mozilla information, I would recommend #developers on irc.mozilla.org. For WebKit information, you can try #webkit on chat.freenode.net.

Note that I'm no longer a Mozilla developer and haven't had any association with the project since 2008, so it's entirely possible I'm wrong. Feel free to correct me.