Abstract How browser work

This is a abstract content from how browsers work

Main structure

User interface 
   this includes the address bar, back/forward button, bookmarking menu etc.
 
Browser engine
   the interface for querying and manipulating the rendering engine.
 
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.

Networking
 used for network calls, like HTTP requests. It has platform independent interface and underneath implementations for each platform.

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.

JavaScript interpreter. 
Used to parse and execute the JavaScript code.

Data storage.
his is a persistence layer. The browser needs to save all sorts of data on the hard disk, for examples, cookies.

The main flow

I Parse STEP

1. Parse HTML  to DOM tree

2. Parse CSS to css tree

3. Parse javascript.

• javascript will execute when it encounter and this the html may be not all in standby.

II Build the Render tree

A render tree will combine the DOM NODE and CSS attribution

III  Layout 

Layout is output content the width and height in the screen, and show the color etc. The viewport mean the browser default position