How Browsers Work Article (Tali Garsiel)

Moin Moin,

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:

_ context free grammar:

_ Flex parser generator:

_ Bison parser generator:

_ HTML5 specification:

_ WHATWG community working on HTML:

_ parsing HTML:

_ HTML syntax:

_ CSS2:

_ 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.



Published: August 30 2011