Rendering Engine and Javascript Engine of Web Browser
A web browser is a software application with a graphical user interface that gives access to view web pages and online content to users. when it comes to the architecture of a web browser we have to identify many different components in a web browser-like user interface, browser engine, rendering engine, networking, Javascript engine UI backend, and data persistence. This article mainly focuses on rendering engine and javascript engine.
Rendering Engine
the rendering engine is responsible for build structure and designs the graphical view of the requested web page. it constructs web pages by interacting with HTML elements, CSS and XML files, designs and shapes, multimedia files like images, etc.
How rendering engine works -- The first step of the rendering engine is parsing data including HTML CSS of the requested web page. after that, the HTML element converts to DOM nodes and creates a hierarchical collection of them called a DOM tree. Simultaneously, the browser also creates a render tree. The Render tree contains instructions that define the order in which elements are displayed on a web page. The Render tree contains instructions that define the order in which elements are displayed on a web page. But, when a render tree is created, the position or size values are not assigned. Calculating values to estimate the desired location is called a layout process. This process assigns precise coordinates to each node and ensures a correct position on the web page. The next and final step is to paint the screen. render tree is traversed, and the renderer’s paint() method is invoked, which paints each node on the screen using the UI backend layer.
Few Rendering engines used by famous browsers:-
Blink -- Using in Chrome and Opera. open-source, Developed by Google. written in C++
Gecko -- using in Firefox. Developed by Mozilla.. Written in rust.
WebKit-- using in Safari.
Trident-- using in Explorer.
Javascript Engine
JavaScript engine is the software module includes in the web browser to interpret JavaScript code in web pages. JavaScript engine working as an interpreter, because it has Just In Time (JIT) compilation, and no binary code is generated.
Few Rendering engines used by famous browsers:-
V8 -- open-source, developed by Google, A multi-threaded program written in C++, Used in Node.js,
Rhino -- managed by the Mozilla Foundation, open-source,
SpiderMonkey -- first JavaScript engine, used in Firefox
JavaScriptCore -- open-source, marketed as Nitro and developed by Apple for Safari
Chakra -- used in Internet Explorer and Microsoft Edge