I recently read the super awesome article “How Browsers Work” here:
Paul Irish cleaned up the original article written by Tali Garsiel, an Israeli developer. You can find her article here:
I strongly recommend all people who develop software for the web to read this article. It provides a great look behind the scenes of how browsers work. The topics are:
_ the rendering engine - processing the HTML document
_ the parser with it’s lexical and syntax analysis - the lexer (tokenizer) creating tokens and the parser constructing the pars-tree by applying syntax rules
_ the HTML parser based on a DTD
_ the resulting DOM-tree after parsing HTML
_ the parsing algorithm of the HTML Parser
_ the tokenization algorithm
_ the tree construction algorithm creating elements of the resulting DOM-tree and each of it’s token
_ CSS parsing
_ render tree construction
_ creating the layout (or reflow) out of the render tree
_ the painting process - display the content elements by traversing the created render-tree
_ the CSS2 visual model
This is a lot of stuff and actually I am reading the article the second time. Imho the biggest benefit of studying the article is the deeper understanding how all the components of a browser work together to present the resulting website.
Here are some links I extracted for further reading.
_ The webkit rendering engine used by Chrome and Safari browsers: http://www.webkit.org/
_ context free grammar:
_ Flex parser generator:
_ Bison parser generator:
_ HTML5 specification:
_ WHATWG community working on HTML:
_ HTML syntax:
_ CSS specification:
_ CSS2 box-model:
Some of the links are kind of lame to read in a way but still very interesting for digging deeper.
I hope you enjoy reading the article the same way I do.