6

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".

Pumych
  • 1,368
  • 3
  • 18
  • 31
  • Did you go through [high-level arch](https://www.chromium.org/developers/design-documents/multi-process-architecture) & [webkit arch](https://www.chromium.org/developers/design-documents/displaying-a-web-page-in-chrome)? – overexchange Jun 13 '18 at 18:55

2 Answers2

11

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

enter image description here

Community
  • 1
  • 1
Zico Deng
  • 645
  • 5
  • 14
9

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

Saikumarch
  • 121
  • 2
  • 5
  • 1
    A great answer. I think it can be improved by just being a bit more explicit about why it has this software architecture. The idea of the architecture you describe is security and to sandbox the rendering of the web content which is untrusted. So while many alternative architectures are possible the one you outlined is the one that has evolved to harden webbrowers against content based attacks. You answer implies that if course but students might not know about the historic security problems of old browsers. So it might help to point out those historic problems of simpler architectures. – simbo1905 Mar 19 '19 at 07:25