Browser's Engine

I was really curious to know about how various browsers' like mozilla, chrome work. So i started studying and got to know about different types of browsers' and browser engine's available in browser.

There are mainly two engine one engine is Layout engine responsible for render user interface from HTML and other is javascript engine for interpreting Js.

Layout Engine or Rendering Engine

Layout engine is responsible for converting HTML documents to the interactive visual representation on the user's device. along with CSS. It includes webpage (which is in the form of HTML document), image, video and other files. 

There are different engines for different browsers. There is a list of browsers with engines.

Javascript Engine

A JavaScript engine is a program or an interpreter that executes JavaScript code. A JavaScript engine can be implemented as a standard interpreter, or just-in-time compiler that compiles JavaScript to bytecode.

For javascript, all browsers have different engines. These engines run javascript in the background then process and display the result in DOM(HTML) or a browser. Javascript is fully responsible for providing interactivity in the layout of the web page.

Also for js all browsers have different engines

Working of Browser

Main components of the browser

• User Interface: User Interface is UI of the webpage or simply what we see on the page like heading, image, button, input form by which we interact with we page.
• Browser Engine: This engine is middleware between a user interface and rendering engine. According to the inputs from various user interfaces, it queries and manipulates the rendering engine.
• Rendering Engine: This engine is responsible for rendering the requested webpage on the browser screen. This engine interprets the HTML, XML document and image, other rendering components that are formatted using CSS and generate described layout in the browser.
• Networking: Component of the browser which retrieves the URLs using the common internet protocols of HTTP or FTP. The networking component handles all aspects of Internet communication and security.
• JavaScript Interpreter : It is the component of the browser which interprets and executes the javascript code embedded in a website. The interpreted results are sent to the rendering engine for display.
• UI Backend: UI backend is used for drawing basic widgets like combo boxes and windows. This backend exposes a generic interface that is not platform specific. It underneath uses operating system user interface methods.
• Data Persistence/Storage: This is a persistence layer. Browsers support storage mechanisms such as localStorage, IndexedDB, WebSQL, and FileSystem. It is a small database created on the local drive of the computer where the browser is installed. It manages user data such as cache, cookies, bookmarks and preferences.