DEV Community

Bharath Muppa for Entangled Cognition

Posted on

Chrome Multi-Processor Architecture

In this article, I would like to share my experience, which I came across accidentally while killing a task, I found below the list of Google chrome tasks, though I have opened like 4โ€“5 tabs.

Chrome browser

So, I have tried to find out what is happening with this chrome processes. I started with our favorite Google Search and within minutes I came to know that reason is fairly simple.

It is because of Chromium Multi-process architecture and its S-speed, S-secure and, S-safe principles.

So, letโ€™s start our quest of questions about what leads to this design and why is this even required.

Different types of Processes in chrome

  1. One Browser process โ€” This process is created when we start the Browser.
  2. One GPU process.
  3. One Process per Utility.
    • ๐Ÿ‘‰Network service Utility โ€” responsible for chrome detecting casting devices.
    • ๐Ÿ‘‰V8 proxy Resolver โ€” Not sure about this. something to do with PAC file.
    • ๐Ÿ‘‰Audio Service Utility โ€” helps to play audio ๐ŸŽต on the browser. for more info check this out โ†’ chrome://media-internals/
    • ๐Ÿ‘‰Windows Utilities โ€” this process will be created when the user open file explorer while saving or uploading files
  4. One process per Tab โ€” Every site you visit creates a new process. (more than 20 tabs leads to a different behavior)
  5. One Process per sub-frame โ€” subframe is a frame or iframe element inside a web page.
    • ๐Ÿ‘‰ Frames share a process with their page if the frame and the page are from the same site (based on the URL).
    • ๐Ÿ‘‰Frames from cross sites create a new process.
  6. One process per extension โ€” Which you installed on chrome.

๐Ÿ”ญ Shortcut to check chrome task manager
(shift + esc) or Menu -> More tools -> Task manager

Alt Text

You can disable this multi-processes behavior using launch parameter --single-process. ๐Ÿ”—

๐Ÿ“ข This is just to simulate single process behavior, but donโ€™t make it as default. As your site behaves really strange once user uses it in real environment.

c:\path-to-chrome\chrome.exe  --disable-plugins --single-process
Enter fullscreen mode Exit fullscreen mode

๐Ÿ”ฅ Firefox Facts

  • Firefox worked on an internal project called Electrolysis to implement Multi-Process Architecture. To know more please read Electrolysis or e10s.
  • FireFox released new versions with multi-process architecture but it is not the same as chrome.
  • Firefox nightly builds ships with fission which enables site isolation.

๐ŸŒ IE Facts

  • IE's multi-process architecture was introduced with IE8. It makes use of two types of processes
    1. One main process
    2. Zero or More Tab processes(based on configuration)

Till now we understood about what / when processes are created. Now we will ask our-self a quite interesting question.

But Why we need a multi-process Architecture ?
๐Ÿค” Take time to think before you go through the explanation. ๐Ÿค”

Benefits of Multi-process Architecture in a nutshell

Extracted from google

  1. Sand-boxing โ€” Important aspect of security mechanism, which in simple terms says your code will run in its own process. So your creativity doesnโ€™t bother other's creativity. want to know more? ( ๐Ÿ‘‰ ๐Ÿ”—)
  2. Black Sheep Detection ๐Ÿ˜ โ€” If one of the pages is unresponsive, then the browser can easily delete that particular process and saves the life of User. (Definitely, you might have faced one, while processing Bank transaction and suddenly browser crashes..)
  3. Optimal memory footprint โ€” Helps in setting priory on tabs which are not active.
  4. Private Data โ€” Web pages will have their own memory. By now, you must understand why stored objects in local-storage on one tab doesnโ€™t available in another tab.
  5. Site Isolation โ€” When Site Isolation is enabled, each renderer process contains documents from at most one site. This means all navigation's to cross-site documents cause a tab to switch processes. (๐Ÿ‘‰ ๐Ÿ”—)

Extracted from google

Its Time for Next Important question โ€ฆ

How does this mechanism work?

Prior knowledge of Browsers is an added benefit to understanding this mechanism.

Alt Text

I will try to summarize this mechanism in my perspective. ๐Ÿ˜…

Letโ€™s assume, below steps were performed by you to watch a YouTube video and Twitter page on an exciting day.

  1. You have opened a chrome browser.
    • ๐Ÿ‘‰ A browser process will be created and two threads namely main/UI and IO threads are created.
    • ๐Ÿ‘‰ Browser process will check for all extensions and create one process per extension.
  2. Type in your URL bar.
    • ๐Ÿ‘‰ The browser will check whether it is a search query or URL. If it is URL, it will be passed to IO thread (Network handling happens here).
    • ๐Ÿ‘‰Then ResourceDispatcherHost(This object will be there in IO thread) checks for valid network response and pass it to main/UI thread.
    • ๐Ÿ‘‰ Then UI thread request to create new Render process and maps that process with RenderViewHost(This object will be there in Main/UI Thread of browser process), which creates 2 new threads in corresponding render process namely Main Thread and Render thread*.
    • ๐Ÿ‘‰ Main thread uses for inter-process communication.
    • ๐Ÿ‘‰ Render Thread consists of all Blink and v8 implementations(this is the place where all exciting stuff happens).
  3. Type on a new tab. ๐Ÿ‘‰ sub-steps in step-2 will be repeated. ๐Ÿ‘‰ a new instance of RenderViewHost will be created to handle this tab within the same browser process.

If you want to explore more about it, then I strongly suggest you to visit Chromiumโ€™s official docs ๐Ÿ”— or this medium post ๐Ÿ”—.

I hope now we can answer the below questions.

  1. What are the different types of Processes? โœ”๏ธ
  2. When they are created?โœ”๏ธ
  3. Why is it required?โœ”๏ธ
  4. How this Mechanism Works. โœ”๏ธ

Learned something? help others find this article.


Top comments (0)