I kn...">
Geek Answers Handbook

How to look under covers and see how HTML is displayed?

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 the text there ... etc.

An example is Mozilla. I did a few searches and found this one , so I think I'm on the right track. However, the first sentence says it all:

Page reorganization: The layout engine used by Mozilla (which is well known to many names) began as a project to create a new layout engine for Mozilla and became the Mozilla layout engine and the basis for an almost complete rewrite at the end of 1998.

Incomprehensible.

Here is a list of the parts that I know exists (from this Mozilla page):

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

Can someone explain to a layman how the Mozilla browser model displays a button?

+6
html architecture mozilla
source share
1 answer

So actually this is really a very difficult question. I worked on the Mozilla project a couple of years ago, here's how it works to the best of my memory:

  • HTML is also parsed into nodes like those specified in the DOM standard. This tree represents the data structure in the document.
  • Another parallel tree, called the frame tree, is built from this DOM tree. This tree represents the visual information in the tree — things like the window model are implemented here.
  • After Mozilla has developed all the interdependencies and built a satisfactory frame tree, the frame tree is in pain. There are several steps (view tree, widget tree) that, it seems to me, are outdated and, in any case, were very specific to Mozilla. The fact is that this frame tree is then passed to the graphics subsystem (which ultimately calls the OS) for rendering.

Most modern browser layouts ("reflow" in Mozilla terms) are gradually increasing, so all this happens just at the time when various resources are loading, so it’s not completely accurate.

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

Please note that I am no longer a Mozilla developer and had no connection with the project since 2008, so it’s quite possible that I'm wrong. Feel free to correct me.

+4
source share

More articles:


All Articles