Andy Wenk — How Browsers Work Article (Tali Garsiel)

Moin Moin,

I recently read the super awesome article “How Browsers Work” here:

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

Paul Irish cleaned up the original article written by Tali Garsiel, an Israeli developer. You can find her article here:

http://taligarsiel.com/Projects/howbrowserswork1.htm

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:
http://en.wikipedia.org/wiki/Context-free_grammar

_ Flex parser generator:
http://en.wikipedia.org/wiki/Flex_lexical_analyser

_ Bison parser generator:
http://www.gnu.org/software/bison/

_ HTML5 specification:
http://dev.w3.org/html5/spec/Overview.html

_ WHATWG community working on HTML:
http://www.whatwg.org/

_ parsing HTML:
http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html

_ HTML syntax:
http://www.w3.org/TR/html5/syntax.html#html-parser

_ CSS2:
http://www.w3.org/TR/CSS2/

_ CSS specification:
http://www.w3.org/TR/CSS2/grammar.html

_ CSS2 box-model:
http://www.w3.org/TR/CSS2/box.html