How does layout engine work?

I am REALLY curious how a web page is parsed into a DOM tree, then how the tree is rendered in a web browser. Namely,how does layout engine work?

I guess whether reading source code of a simple web browser (Webkit is too hard fo开发者_如何学JAVAr me now. ) is a feasible choice? Thanks

Parsing a web page into a DOM tree isn't terribly difficult to understand since (well-formed) HTML is already in a tree structure. So I don't think there's much to it except when you want to also annotate things like CSS, conditional code, and scripts into your tree.

Layout and rendering is a much more challenging problem to work out. If you're not ready to dive directly in the code, you can read their docs:

WebKit Layout and Rendering

You can also go to this link which has a great explanation and review of the concerned question. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

The page linked to by @binariedMe is good for understanding the narrative of when a browser parses html and then applies layout rules. If you want to get a more solid mental model of those rules, you should read http://book.mixu.net/css/