Intended Audience

This article is written by a software developer for anyone who is interested in the technical aspects of modern web browsers. Readers do not need any pre-knowledge to understand the content of the article. All you need to know is overview of browser (Browser Fundamentals | Part-2) and basics of HTML & CSS.

This is a part of series on browser fundamentals. In this series, we will, layer by layer peel the unknowns of a browser and eventually deep dive into the technical aspect of it. From an HTTP request to content rendering.

Introduction

The Browser Engine of a web browser, is everything which helps to show a content on the browser screen after we hit the entered URL in the address bar. It is not some specific component of the browser, rather it is a combination of engines which orchestrates to display smooth content/UI on the screen. Browser engine is a combination of Rendering Engine & Javascript Engine.

If you want learn about the rendering and javascript engine refer below links:

What gave birth to browser engine?

In early days websites used to be static. Dynamic functionality of a website was not a thing, until Javascript arrived. Browser engines came into existence due to competetion between Netscape and Microsoft. To win the war, both companies were coming up with better features and user experiences. While Microsoft was busy killing its competetion (which it still do), Netscape focused on its users. They started coming up with many user appealing functionlaties and better user experience. One of the feature that Netscape focused, as a part of enhanced user experience was the dynamic functionality (users were able to modify content without reloading the website). For this Netscape used the Scheme language to go ahead. This gave both users and developers the flexibility to change the web content on the go and made the website dynamic. Netscape then collaborated with Sun Microsystem to use more static language, Java. For this reason and for marketing reason, the language is named as the Javascript as we know today. The static (Rendering Engine) and dynamic (Javascript Engine) both are needed to run the website. If any one is missing, website would collapse. Both are combinely called as Browser Engine.

Rendering vs Javascript Engine

Rendering Engine

Rendering engine is responsible for parsing, layout, paint and animation in browser. Basically from from receiving raw HTML & CSS to beautifully displaying to browser's screen, it does everything. This is the reason it is often used interchangeably with browser engine. once it receives the raw data its job is to display as it is. Simple and Sweet. There are different engines developed by different browsers: Browser Rendering Engine List

Javascript Engine

Javascript engine is responsible for making a website dynamic by re-rendering the whole painting process. This is done via a feedback machanism around the rendering engine. Any user generated event or javascript program itself changes the DOM created by the rendering engine and this change information again fed to redering engine as a feedback. Rendering engine is then re-renders the whole website. There are different engines developed by different browsers:

About Author

Lakshit Nagar (A full stack enthusiast)

Principle Software Developer

@Oracle India (Ex-ThoughtWorker, IIT Kanpur Alumni)

I love to shape my ideas into a reality. You can find me either working on a project or having a beer with my close friend. :-)

Connect: