What's the difference between a browser engine and rendering engine?

Question

I found some similar questions but they do not fully respond to the one I have, here is the list that I hope will help someone else:

What's the difference between a browser engine, a rendering engine and a user agent?

Difference between layout engine and javascript engine

---

As explained here https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

The browser engine: marshals actions between the UI and the rendering engine.

The rendering engine: responsible for displaying requested content. For example if the requested content is HTML, the rendering engine parses HTML and CSS, and displays the parsed content on the screen.

According to Wikipedia: A web browser engine (sometimes called web layout engine or web rendering engine)...

But I little bit confused, I still can't understand what the browser engine is, what are the "actions between the UI and the rendering engine".

Answer 1

I think the answer depends on which context we are talking about here (oh man, engineers like using terms differently for different contexts).

Context 1: if you are talking to a friend who just knows basic knowledge about the web...

The browser engine in this context refers to a software that powers your browser and responsible for displaying content on screen. If you search for browser engine in Wikipedia, it tells you popular browser engines include Webkit, Gecko, Trident, and so forth (https://en.wikipedia.org/wiki/Browser_engine).

The rendering engine in this context would be...if your friend knows this word, he or she should fall into context 2 :)

Context 2: if you are talking to a friend who knows how browsers work and all the crazy magic behind them...

The browser engine in this context refers to the browser process which is mainly responsible for managing all render processes and displaying UI. So in your question, you mentioned about

The browser engine: marshals actions between the UI and the rendering engine.

This is correct as well. If you look at the Chromium's architecture, you will notice that the browser process/engine coordinates page content with rendering processes.

The rendering engine in this context refers to a program that constructs DOM, executes JavaScript, and layout out web pages, e.g. Webkit, Gecko, Trident. A rendering engine consists of two primary components: WebCore which contains core layout functionality and JavaScriptCore where JavaScript interpreter V8 lives.

Your friend seems to be an expert and must also know about the rendering process, which is responsible for constructing a web page. A rendering engine is just a crucial part in the rendering process.

The following image shows the high level architectural overview of Chromium architecture (Google Chrome open source version). If you want to read more about the magic behind modern browsers, you can check out this post: https://medium.com/@zicodeng/explore-the-magic-behind-google-chrome-c3563dbd2739

Answer 2

I don't know how to explain in terms of "Engine". Let me explain by using the keyword "process" in the context of chromium browser which has multi-process architecture.

Browser process : Main browser process that manages renderer processes

Renderer process : Basically a tab (in chromium)

In order to prevent the entire browser to crash or compromise the host system, due to a malicious web content, a separate process is delegated with the handling of the web content for each request. This separate process is the Renderer process (tab process), which do not have user privileges (i.e, limited access to OS system calls).

When one requests for a web site, the render process forwards the request to the browser process which in-turn makes the network calls for the website. After the arrival of the web content, the browser process sends the content to the renderer process. The renderer process parses the HTML,CSS fils, prepares the DOM, maintains the JS run time (V8 instance) and sends the content as a bitmap format to the browser process for displaying it on the UI.

The browser process treats the renderer process as a black box and expects the web content in a certain format from the renderer process. This conversion of web content to the required format includes several sub-components of which layout engine (process) is one.

So, Browser process handles the user privileged resources/requests like access to filesystem, network etc. where as the sandboxed Renderer process is responsible for converting the web pages to a format that browser-process can put it to display in a OS native window manager.

I wonder why the layout engine is named as the browser engine. The above mentioned Browser process is different from Browser-Engine (Layout engine). I have not explored the layout engine yet.

References : https://seclab.stanford.edu/websec/chromium/chromium-security-architecture.pdf