Understanding the architecture of the web browser
Browser has a complicated architecture and and each of them has some difference in architecture. But the basic layout of the browser architecture is:
The main components of a browser are
- Browser UI
- Browser engine
- Rendering engine
- Networking module
- JavaScript engine/interpreter
- UI back-end
- Local data storage/browser cache memory.
Browser UI
It is the component of a browser with which the user interacts. It includes everything you can see on the screen when you open a browser. Browser UI includes the home button, back button, refresh button, navigation bar of the browser etc.
Browser engine
It is the component of the browser which handles the interaction of the browser UI with the rendering engine and other components of the browser. To simplify it, it means that when we press the back button on the browser window, it means that the browser view port should display the previously visited webpage.
So the command of displaying the previously visited webpage upon pressing the back button is relayed by the browser engine to the other components of the browser.
Networking Module
Networking module of the browser is the component of the browser which interacts with the server. Networking module of the browser sends HTTP request to the server and also receives the data from the server and transfers it to the other components. Networking module downloads the HTML,CSS or JavaScript file and then transfers the data to other components.
JavaScript Interpreter
It is the component of the browser which interprets the JavaScript file and converts it to binary file(i.e, it converts the high level JavaScript language to binary language( 0 and 1)) so that they can be executed by the JavaScript engine in the browser.
UI Back-end
UI back-end is used for drawing basic widgets like combo boxes and windows. This back-end exposes a generic interface that is not platform specific. It underneath uses operating system user interface methods.
Rendering Engine
The rendering engine, as the name suggests is responsible for rendering the requested web page on the browser screen. The rendering engine interprets the HTML, XML documents and images that are formatted using CSS and generates the layout that is displayed in the User Interface. However, using plugins or extensions, it can display other types data also. Different browsers user different rendering engines:
* Internet Explorer: Trident
* Firefox & other Mozilla browsers: Gecko
* Chrome & Opera 15+: Blink
* Chrome (iPhone) & Safari: Webkit
Local Data Storage/data persistence
This is a persistence layer. Browsers support storage mechanisms such as local Storage, IndexedDB, Web SQL and File System. It is a small database created on the local drive of the computer where the browser is installed. It manages user data such as cache, cookies, bookmarks and preferences.
So basically the workflow of the browser is that at first the HTML, CSS and JS file downloaded are then parsed by the parser to create two trees. One tree is called the DOM (document object model) tree or content tree. This tree basically is used to generate the hierarchy among the HTML elements. It is generated by parsing the HTML file. It is used to determine which element is the child/parent of the other HTML element. This hierarchy is important because various CSS and JS properties use this hierarchy to determine their scope of effect.
Next comes the creation of render tree. This tree is generated out of the CSS component of the webpage. It is created basically to determine the order in which various style property will be implemented. Firefox calls each node pf the render tree as frames while webkit calls them render object or renderer.
Until this point, each element in the webpage hasn’t been assigned any position or size. So the next step is called layout process or reflow. In this step each element is assigned their position by assigning them the coordinates in which they should be rendered. The view port is considered as the Cartesian plane.
Next comes the step called Painting. In this step the colors, textures and other graphical elements are assigned to each HTML element after parsing the render tree. This process uses the UI back-end.
After this step, the webpage is being displayed on the view port of the browser.
The rendering engine always tries to display the contents on the screen as soon as possible for better user experience. It does not wait for the HTML parsing to complete before starting to build and layout the render tree. It parses and displays the content it has received from the network, while rest of the contents stills keeps coming from the network.
