How web browsers use Process & Threads
You may have the experience of working on multiple browser tabs at one time or receiving e mails, notifications while you are working on another program on your computer or smartphone. This experience is much familiar to all of us and we know this happens because of the multi-tasking ability of your computer or the web browser. In this article we will dig into the underlying process of that incident and try to understand about the functionality of a web browser related to this. Having a brief idea on the terms Process and Threads will be useful as you continue to read this article.
Process and Threads
A process is known as a program under execution which has been loaded into memory along with all the resources it needs to operate. A thread is a basic unit of execution or CPU utilization within a process. In other words, a thread is located inside a process. Each program may have a number of processes associated with it and each process may have anywhere from one to many threads executing with it. Threats belonging to the same process will share the resources like Open file signals, Code section, Data section and other system resources. Basically a thread is a queue which process the tasks one by one. When a task in the queue started executing, the next task has to wait until the earlier one finish executing. Traditional process which we call a Heavyweight process has a single thread of control, so that the system will be able to perform only one task at a time. And also a failure or a problem with a one task of this system will make thread stop, and eventually it will lead to the termination of the entire process. Actually this is not a very efficient system. But if a processor has multiple threads of control, then it can easily perform more than one task at a time. In this method the tasks can process faster than in the previous plus the entire process will not be affected by a crash of a single thread.
Web browsers
Before the multi-process web browser came onstage, we used Single process browser which was less efficient than the Modern browser which we use in present. The web pages were simple and had little or no active code in them. It made sense for the browser to render all the pages you visited in the same process, to keep resource usage low. Instability, low performance and insecurity of the Single process browser led the developers to make multi-process browser which was able to avoid all the problems in a Single process browser. There are multiple processors in this browser and they used to communicate with Inter Process Communication (IPC). In a modern browser it has; Browser process, Renderer process, Plugin process, GPU process, Network process, Device process, Video process (one of the utility processes) and Audio process (one of the utility processes).
Browser process controls the applications including address bar, bookmarks, back and forward buttons. Also handles the invisible, privileged parts of a web browser. Renderer process controls anything inside of the tab where a website is displayed. Also contain the logic for handling HTML, Javascript, CSS, images, and so forth. Each renderer process is run in a sandbox, which means it has almost no direct access to your disk, network, or display. All interactions with web apps, including user input events and screen painting, must go through the browser process. The browser process also creates one process for each type of plug-in that is in use, such as Flash, Quicktime, or Adobe Reader. These processes just contain the plug-ins themselves, along with some glue code to let them interact with the browser and renderers. The advantage of the multi-process approach is that websites run in isolation from one another. If one website crashes, only its renderer process is affected; all other processes remain unharmed.
Chrome Architecture
Chrome was the first browser with a multi-process architecture which encapsulates all logical functions in separate processes. More specifically it has two unique browser and GPU processes, separate processes for each tab and separate processes for each extension. Each process is heavily multi-threaded. The main goal this is to keep the main thread and IO thread responsive. Chrome is the only browser with a useful task manager. It can be opened with the keyboard shortcut SHIFT+ESC. As you can see below, Task Manager lists all active Chrome processes with their designated functions. For each process, it shows CPU, network and memory resource usage.
Firefox Architecture
In older versions of Firefox, the entire browser ran within a single operating system process. Specifically, the JavaScript that ran the browser UI and the JavaScript that ran within web pages were not separated. Currently, the latest versions of Firefox run the browser UI and the web content in separate processes. In the current iteration of this architecture, all browser tabs run within the same process and the browser UI runs in its own individual process. In future iterations of Firefox, there will be more than one process to exclusively handle web content.
Chrome vs Firefox
1. Browser Architecture
Although Chrome and Firefox both support multi-threading, they do it in different ways. In Chrome, each and every tab you open gets its own content process. This approach maximizes performance, but this will affect on memory consumption and battery life of your machine. Firefox does not take this approach, but instead spins up to four content process threads by default. In Firefox, the first 4 tabs will use their own processes and additional tabs continue to use threads within those processes. Therefore Chrome is less likely to crash since if one process crashes, it will not crash the entire browser.
2. Browser Memory usage
As Chrome creating a separate content process for each instance of a site, each of those processes will have its own memory, leading the system to increase its memory usage. On the other hand, Firefox’s approach results in Firefox using less memory than Chrome. By default, Firefox now creates up to 4 separate processes for web page content. Multiple tabs within a process share the browser engine that already exists in memory, instead of each creating their own.
3. Browser Speed
Chrome uses multiprocessing while Firefox more focuses on multi-threading. So each tab in Chrome is a process whereas in Firefox each tab is a thread when it comes to more than 4 tabs. As to shared memory and context switching is faster in threads, multi-threading is faster than multiprocessing. So eventually Firefox performs faster than Chrome.
__________________________________________________________________
References:
What’s the Diff: Programs, Processes and Threads — Roderick Bauer
How web browse works step by step in 2019 — Carson Chen
