Browser - It’s a great idea which helps to access various applications (Web Applications) in one place and It’s most widely used software application for retrieving, presenting and traversing information resources on the World Wide Web identified by a URI/URL.
As a Web Developer, Learning Browser’s internal operations and their architecture helps you to take better decisions during development also to discover the best and worst practices.
Browser Functionality
It’s operate to mainly display the web resources (HTML, XML, CSS, JS, JSON, PDF etc) you chose. In General, browser request it from the server and server response to the browser window. The Resource location is specified by the user using a URI (Uniform Resource Identifier).
W3C maintains the specification on how browser should interpret and display the web page (HTML) and this helped to solve the compatibility issues between browsers.
Browser Components
It has set of components with work flow. Lets have a look at each component in detail one by one.
User Interface
The Address Bar is one of the good example. It interface with user to insert URI and interacts with various component to render the web page.
There are plenty of user interfaces for various needs like Back and Forward Buttons, Bookmark, Reload, Stop and Home Buttons which you see below.
Interface Layer communicates to data layer for retrieving data and UI Backend to draw widgets as per HTTP Response body which is our HTML source code. Browser engine communicates between UI and the Rendering / Layout Engine.
Now in Modern Browsers has interface (Dev Tools) which helps to see the client data like Cookies, Local Storage, Session Storage, IndexDB etc.
Browser Engine
It’s a bridge between User Interface and Rendering Engine. It provides methods to initiate the loading of a URL and other actions like (reload, back and forward).
Layout / Rendering Engine
It’s able to render the content of given URL in browser screen and interprets the HTML, XML and CSS. It is single threaded. By default, It displays data according to your specified content type (MIME). For Example HTML, Images, XML, CSS, JSON, PDF etc.
Key operation of Rendering engine is HTML Parser. Each browser use various engines like Chrome and Opera uses Blink, Firefox uses Gecko, IE Edge uses EdgeHTML, Internet Explorer uses Trident, Apple Safari uses WebKit.
What is the Flow?
1. Parsing HTML document by HTML Parser convert elements to Node and create Content Tree.
2. Parsing Styles code / document by CSS Parser and create Render Tree.
3. Render Tree goes through Layout Process. Element’s Node get position coordinates.
4. Render Tree will be traversed and each node will be painted using the UI Back-end Layer.
What is Dirty bit system?
1. This will be used for small changes which doesn’t require to do full layout change.
2. It uses incremental layout asynchronously.
3. It’s two flags are dirty and children are dirty.
Few Other Stages
- Width calculation - It’s calculated using the container width attribute / style attribute.
- Line Breaking -During scroll, layout parent creates the extra renderers and calls layout on them.
- Painting
1. render tree is traversed and the renderer’s “paint()” method.
2. Paint method call to display content on the screen.
3. It uses UI infrastructure component.
4. Painting Order (background color, background image, border, children, outline)
Network
1. Networking handle all aspects of Internet Communication and handles URLs to use HTTP, FTP.
2. Implements a cache of retrieve documents to minimize network traffic.
JavaScript Interpreter — Scripting Engines
- JavaScript Interpreter executes the JS code and result to rendering engine.
- Each browser use various scripting engines like Chrome uses V8, Firefox uses Spider Monkey, IE Edge uses Chakra (JavaScript Engine), Internet Explorer uses Chakra (JScript Engine), Safari uses Nitro (JavaScript Core)
UI Back-end
Back-end helps to draw widgets like select box, input box and check box etc.
Data Persistence
This layer is persistence and this helps browser to store data locally like Cookie, Local Storage, Session Storage, IndexedDB, WebSQL and FileSystem.
Is all Modern Browsers uses the same Engine ?
No, Each Browser Development Team developed various Rendering and Scripting Engine. Below are the Layout and Scripting engines which is used by modern browsers.
Yes, You are done and you are in the last lines of this Article but this is not end of this Story and there is few more parts soon, stay tuned !