How Browsers Work: Behind the Scenes

1. the user interface - this includes the address bar, back/forward button, bookmarking menu etc. every part of the browser display except the main window where you see the requested page.
2. the browser engine - marshalls the actions between the ui and the rendering engine.
3. the rendering engine - responsible for displaying the requested content. for example if the requested content is html, it is responsible for parsing the html and css and displaying the parsed content on the screen.
4. networking - used for network calls, like http requests. it has platform independent interface and underneath implementations for each platform.
5. ui backend - used for drawing basic widgets like combo boxes and windows. it exposes a generic interface that is not platform specific. underneath it uses the operating system user interface methods.
6. javascript interpreter . used to parse and execute the javascript code.
7. data storage . this is a persistence layer. the browser needs to save all sorts of data on the hard disk, for examples, cookies. the new html specification (html5) defines 'web database' which is a complete (although light) database in the browser.

main flow examples

figure : webkit main flow

figure : mozilla's gecko rendering engine main flow( 3.6 ) figure : the render tree and the corresponding dom tree ( 3.1 ). the "viewport" is the initial containing block. in webkit it will be the "renderview" object.

dig more
first check her article which is very comprehensive. but if you want to dig even more you can check her article's resources:

1. browser architecture
   1. grosskurth, alan. a reference architecture for web browsers (pdf)
   2. gupta, vineet. how browsers work - part 1 - architecture
2. parsing
   1. aho, sethi, ullman, compilers: principles, techniques, and tools (aka the "dragon book"), addison-wesley, 1986
   2. rick jelliffe. the bold and the beautiful: two new drafts for html 5.
3. firefox
   1. l. david baron, faster html and css: layout engine internals for web developers.
   2. l. david baron, faster html and css: layout engine internals for web developers (google tech talk video)
   3. l. david baron, mozilla's layout engine
   4. l. david baron, mozilla style system documentation
   5. chris waterson, notes on html reflow
   6. chris waterson, gecko overview
   7. alexander larsson, the life of an html http request
4. webkit
   1. david hyatt, implementing css(part 1)
   2. david hyatt, an overview of webcore
   3. david hyatt, webcore rendering
   4. david hyatt, the fouc problem
5. w3c specifications
   1. html 4.01 specification
   2. w3c html5 specification
   3. cascading style sheets level 2 revision 1 (css 2.1) specification
6. browsers build instructions
   1. firefox. https://developer.mozilla.org/en/build_documentation
   2. webkit. http://webkit.org/building/build.html