How Web Browsers Work ?
What is a browser ?
A web browser also referred as browser is a software application used to access information on world wide web. The main functionality of a browser is to retrieve web resources from the server and display it on the web browser window. The web resource is usually an HTML document, but may also be a PDF, image, audio, videos or some other type of content. The location of the resource is specified by using a URI (Uniform Resource Identifier).
A browser contains a well structured components which performs a series of task to display web resources on the browser window.
The browser’s high level structure
The main components of a web browser are:
- User Interface (UI): It is the layout of elements available for user to interact in the browser window except for the web page itself. The elements for interaction includes address bar, refresh, back, forward, bookmark options and etc.
2. Browser Engine: It is the bridge between the UI and the Rendering Engine. Based on inputs from the UI, it queries HTML document and other resources of a web page into an interactive visual representation on the browser window by manipulating the rendering engine.
3. Rendering Engine: It is the component responsible for displaying the requested content on the browser window. For example, if an HTML page is requested, then it is responsible for parsing HTML document and the CSS and display the parsed and formatted content on the screen.
By default, it can display HTML , XML documents and images. It can display other formats of data by using browser plugins and extensions.
There are different rendering engines for different browsers. For example, Internet Explorer uses Gecko, Safari uses WebKit, Chrome and Opera (version 15 onwards) uses Blink, an extended implementation of WebKit.
WebKit is an open source rendering engine which started as an engine for the Linux platform and was modified by Apple to support Mac and Windows. See webkit.org for more details.
It is important to note that browsers such as Chrome run multiple instances of the rendering engine: one for each tab. Each tab runs in a separate process.
The Main Flow
The rendering engine gets the content of the requested document from the Networking component in chunks of 8kb.
Once the chunks are received, following will be the basic flow of rendering engine:
So here, in this flow, we can see how a HTML document that was fetched over the network is parsed and rendered into a visually appealing view on the screen. The flow contains primarily four stages:
1.Parsing HTML to construct the DOM tree: The rendering engine will start parsing the HTML document and convert elements to Document Object Models (DOM) nodes in a tree called the “content tree”.
2. Render tree construction: The engine will parse the style data, both in external CSS files and in style elements. Styling information together with visual instructions in the HTML will be used to create another tree called the “render tree”.
The render tree contains rectangles with visual attributes like colour and dimensions. The rectangles are in the right order to be displayed on the screen.
3. Layout of the render tree: After the construction of the render tree it goes through a “layout” process. The output of the layout process is a “box model,” which precisely captures the exact position and size of each element within the viewport: all of the relative measurements are converted to absolute pixels on the screen.
In the below screenshot, you can see the “box model” (margin, border, padding, width and height) information computed for body element.
4. Painting the render tree: The render tree will be traversed and each node will be painted using the UI backend layer. This process is also referred to as “rasterising”.
This is the stage, where the computed layout information for each node in the render tree is converted to actual pixels on the screen.
It’s important to understand that this is a gradual process. For better user experience, the rendering engine will try to display contents on the screen as soon as possible. It will not wait until all HTML is parsed before starting to build and layout the render tree. Parts of the content will be parsed and displayed, while the process continues with the rest of the contents that keeps coming from the network.
Main Flow Examples
Repaint occurs when changes are made to the element’s appearance but do not affect its layout. For example, like changing the background colour, opacity, visibility of an element.
Reflow occurs when changes are made to the element that changes a part of the layout or the entire page. Reflow causes the subsequent reflow of all the child and parent elements as well as any elements following it in the Render/Frame tree.
4. Networking: It is the component that handles all kind of network communication on the browser. It uses a set of common networking protocols like HTTP, HTTPS, FTP and etc while fetching the requested resources through URLs.
5. UI Backend: It is used to draw basic widgets like combobox, alert, pop-up windows, frames etc. This backend exposes a generic interface that is not platform specific. Underneath it uses operating system user interface methods.
6. JavaScript Interpreter: It is a component used to parse and execute the JavaScript code embedded in a web page.
There are different types of JS engines used by different browsers to analyse, parse and execute, by generating the most optimised JS code in the shortest time. A few are,
- Chrome uses V8 Engine
- Mozilla uses SpiderMonkey
- IE and Edge uses Chakra
- Safari uses JavaScriptCore
7. Data Storage: This is a persistence layer. The browser may need to save all sorts of data locally, such as cookies. Browsers also support storage mechanisms such as localStorage, IndexedDB, WebSQL and FileSystem.
Please feel free to leave any feedbacks or questions in the comments.
