2019-10-02 - Inside look at modern web browser

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

  • Render Process

    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).
in order to speed up, "preload scanner" is run concurrently. If there are things like <img> or <link> in the HTML document, preload scanner peeks at tokens generated by HTML parser and sends requests to the network thread in the browser process.
  • JavaScript can block the parsing
When the HTML parser finds a <script> tag, it pauses the parsing of the HTML document and has to load, parse, and execute the JavaScript code
  • Style calculation & Layout & Paint

Inside look at modern web browser (part 4)

  • Event listner

    Renderer process handles the event appropriately by finding the event target and running event listeners that are attached.