Inside look at modern web browser (part 1)
|Process||What it controls|
|Browser||Controls “chrome” part of the application including address bar, bookmarks, back and forward buttons. Also handles the invisible, privileged parts of a web browser such as network requests and file access.|
|Renderer||Controls anything inside of the tab where a website is displayed.|
|Plugin||Controls any plugins used by the website, for example, flash.|
|GPU||Handles GPU tasks in isolation from other processes. It is separated into different process because GPUs handles requests from multiple apps and draw them in the same surface.|
Browser Process (UI thread , Network thread , Storage thread)
- when Chrome is running on powerful hardware, it may split each service into different processes giving more stability
Each tab is run by an independent renderer process. If one tab becomes unresponsive, then you can close the unresponsive tab and move on while keeping other tabs alive
Each cross-site iframe in a tab gets a separate renderer process.
Inside look at modern web browser (part 2)
Step 1: Handling input
UI thread needs to parse and decide whether to send you to a search engine, or to the site you requested.
Step 2: Start navigation
the network thread goes through appropriate protocols like DNS lookup and establishing TLS Connection for the request.
At this point, the network thread may receive a server redirect header like HTTP 301. In that case, the network thread communicates with UI thread that the server is requesting redirect. Then, another URL request will be initiated.
Step 3: Read response
Network thread asking if response data is HTML from a safe site
dditionally, Cross Origin Read Blocking (CORB) check happens in order to make sure sensitive cross-site data does not make it to the renderer process
Step 4: Find a renderer process
the Network thread tells UI thread that the data is ready. UI thread then finds a renderer process to carry on rendering of the web page.
Step 5: Commit navigation
Once the browser process hears confirmation that the commit has happened in the renderer process, the navigation is complete and the document loading phase begins.
Once the renderer process "finishes" rendering, it sends an IPC back to the browser process At this point, the UI thread stops the loading spinner on the tab.
Inside look at modern web browser (part 3)
Inner workings of a Renderer Process
- Main Tread & “Preload Scanner”
the main thread begins to parse the text string (HTML) and turn it into a Document Object Model (DOM).
- Style calculation & Layout & Paint
Inside look at modern web browser (part 4)
Renderer process handles the event appropriately by finding the event target and running event listeners that are attached.