Behind the Browser, Part 1: The Basics
Behind the Browser, Part 1: The Basics
The internet is fascinating, and nobody knows that more than web devs. To help you understand this ecosystem a little better, we take a look at browser architecture.
Join the DZone community and get the full member experience.
Join For FreeJumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
The browser. It’s a great idea which helps people to access various web applications in one place. Browsers are the most widely used software applications for retrieving, presenting, and traversing information resources on the World Wide Web identified by a URI/URL.
Web Browser Components (Credits — https://www.html5rocks.com)
As a web developer, learning about browsers' internal operations and their architecture helps you to make better decisions during development and to discover the best and worst practices.
Browser Functionality
Browsers operate to mainly display the web resources (HTML, XML, CSS, JS, JSON, PDF, etc.) you choose. In general, a browser requests this information from the server and the server responds to the browser window. The resource location is specified by the user using a URI (Uniform Resource Identifier).
W3C maintains the specification on how browsers should interpret and display the web page (HTML) and this has helped to solve compatibility issues between browsers that once existed.
Browser Components
Browsers have a set of components with a particular work flow. Let's have a look at each component in detail, one by one.
User Interface
The address bar is a good example. It interfaces with the user to insert a URI and interacts with various components to render a web page.
There are plenty of user interfaces for various needs, like Back and Forward Buttons, Bookmarks, Reload, and Stop and Home Buttons, which you see below.
Address Bar in Chrome
The interface layer communicates with the data layer to retrieve data. The interface layer also communicates with the UI Backend to draw widgets as per requests by the HTTP Response body (our HTML source code). The browser engine communicates between the UI and the rendering/layout engine.
Modern browsers now have interfaces (Dev Tools) which help you see the client data like Cookies, Local Storage, Session Storage, IndexDB, etc.
Browser Engine
It’s a bridge between the user interface and the 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 a given URL in the 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.
A key operation of the rendering engine is the HTML Parser. Each browser uses various engines. Chrome and Opera use Blink, Firefox uses Gecko, IE Edge uses EdgeHTML, Internet Explorer uses Trident, and Safari uses WebKit.
What is the Flow?
Parsing an HTML document with the HTML Parser converts elements to Node and creates a Content Tree.
Parsing styles for code/documents with the CSS Parser and creates a Render Tree.
The Render Tree goes through the Layout Process. An element’s node gets position coordinates.
The Render Tree will be traversed and each node will be painted using the UI Backend Layer.
What is a Dirty bit system?
This will be used for small changes which don't require a full layout change.
It uses incremental layout asynchronously.
Its two flags are dirty and its children are dirty.
A Few Other Stages
Width calculation - It’s calculated using the container width attribute/style attribute.
Line Breaking - While a user is scrolling, the layout parent creates the extra renderers and calls the layout on them.
Painting
A render tree is traversed and the renderer’s “paint()” method is called.
The paint method is called to display content on the screen.
It uses the UI infrastructure component.
Painting order (background color, background image, border, children, outline).
Network
Networking handles all aspects of Internet communication and handles URLs to use with HTTP, FTP.
Implements a cache of retrieved documents to minimize network traffic.
JavaScript Interpreter — Scripting Engines
JavaScript Interpreter executes the JS code and sends the results to the rendering engine.
Each browser uses various scripting engines, for example, 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 Backend
Backend helps to draw widgets like a select box, an input box, a check box, etc.
Data Persistence
This layer is persistent which helps the browser to store data (like Cookies, Local Storage, Session Storage, IndexedDB, WebSQL, and FileSystem) locally.
Do All Modern Browsers Use the Same Engine?
No. Each Browser Development Team developed various Rendering and Scripting Engines. Below are the Layout and Scripting engines which are used by modern browsers.
| Browser Name | Layout and Rendering Engine | Scripting Engine |
Chrome |
Blink (C++) |
V8 (C++) |
Mozilla Firefox |
Gecko (C++) |
SpiderMonkey (C/C++) |
IE Edge |
EdgeHTML (C++) |
Chakra JavaScript engine (C++) |
Opera |
Blink (C++) |
V8 (C++) |
Internet Explorer |
Trident (C++) |
Chakra JScript engine (C++) |
| Apple Safari | WebKit (C++) | JavaScript Core (Nitro) |
Yes. You are done and you are in the last lines of this article but this is not the end of this story and there are few more parts coming soon. Stay tuned!
Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.
Like This Article? Read More From DZone
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}