A web browser is an application software for accessing the World Wide Web. When a user follows the URL of a web page from a particular website, the web browser retrieves the necessary content from the website's web server and then displays the page on the user's device.
The basic flow of how this works is that a user sends a request over the network to the server, it responds with a collection of web content like HTML, CSS, JS, JPEG files. The browser then interprets the content returned and displays the page.
Various engines like the browser engine, rendering engine and javascript engine of the browser work together to interpret the content it received, construct the layout and render the page.
The Browser engine - the interface for querying and manipulating the rendering engine.
The Rendering engine - responsible for displaying the requested content.
- The JavaScript engine - used to parse and execute the JavaScript code.
Browser engine
The browser engine acts as 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).
Rendering engine
The key operations of the Rendering engine are to parse HTML to construct a DOM tree, parse CSS to construct CSSOM and combined them to construct a Render tree. The final output is a render that contains both the content and style information of all the visible content on the screen.
The Render tree construction can be thought of as something like the image below.
The render tree contains only the nodes required to render the page. After the tree is constructed the layout of the page is calculated. It traverses the render tree and figures out the exact size and position of each object on the page.
The Browser computing layout can be thought of as something like the image below.
Finally, the rendering engine takes in the final render tree and renders the pixels to the screen based on the layout position which is calculated.
Different browsers use different rendering engines, such as Blink for Chrome, WebKit for Safari, Gecko for Firefox, and so on, which is why there are minor changes between the same page in different browsers.
JavaScript engine
A JavaScript engine is a computer program that executes JavaScript code. The first JavaScript engines were mere interpreters, but all relevant modern engines use just-in-time compilation for improved performance.
It parses the javascript files it received from the server, compiles the parsed code, and then executes it.
JavaScript engines are typically developed by web browser vendors, and every major browser has one. In a browser, the JavaScript engine runs in concert with the rendering engine and can manipulate elements of the Document Object Model.
Different browsers use their own javascript engines, such as V8 for Chrome, SpiderMonkey for Firefox, JavaScriptCore for Safari, and so on.
The use of JavaScript engines is not limited to browsers. For example, the V8 engine is a core component of the Node.js and Deno runtime systems (programs that execute JS source code).
Resources
taligarsiel.com/Projects/howbrowserswork1.htm
youtube.com/watch?v=SmE4OwHztCc
developers.google.com/web/fundamentals/perf..