What is the internal mechanism that browsers use to process/understand HTML? [closed]

Question

How do browsers understand HTML?

What is the actual processing that takes place internally so that the browser renders HTML in the proper viewable way?

Answer 1

It depends on the particular browser, but the general procedure goes something like this:

1. Read the HTML and parse it into a DOM tree.
2. Load linked resources (stylesheets, scripts, images, media)
3. Calculate the page layout (positions, sizes, colors, fonts, etc.)
4. Render the page

In modern browsers, these operations run partly in parallel, making things much more complicated than they seem.

If you want to know more details, you could look at the source code - at least Firefox (and other Gecko-based browsers) and WebKit (the basis of Google Chrome and Safari) are Open Source.

Answer 2

This is a larger question than it appears when first asked.

A lot goes on behind the scenes. The HTML is parsed, scripts are located, resources are loaded, some of those need to be parsed. Style sheets add to the fun. Scripts can create more work by rewriting the document as it is loaded. Somewhere along the way, the obvious security concerns must be addressed. And with every step, you have to assume that every page is a potential attempt to subvert the whole computer and defend against every attack you can think of as well as every attack you can't think of today.

And that is nowhere near a comprehensive list.

A good example with full source code available is Gecko, the rendering engine behind Mozilla Firefox. It is well maintained, fast, quite standards compliant, and about as secure as 1000s of code reviewers and attackers can make it.