Starting with a Few Questions#
- What is the process when a user enters a URL in the address bar and the browser navigates to the webpage?
- What is the core function of the renderer process? How does it convert HTML, CSS, and JavaScript into a visual webpage?
- As a web developer, what tools and practices can help me optimize webpage performance?
Multi-Process Architecture#
An operating system above the operating system
Mermaid Loading...
Roles of Each Process#
Browser Process#
- Core Coordinator: The browser process is the "command center" of the application, responsible for coordinating other processes and handling all browser transactions outside of tabs.
- User Interface (UI) Control: It controls the "Chrome" part of the browser application, including the address bar, bookmarks, and the forward and back buttons. The UI thread is responsible for rendering these browser buttons and input fields.
- Network Request Handling: The network thread in the browser process is dedicated to interacting with the network stack, receiving data from the internet, handling DNS queries, establishing TLS connections, and managing server redirects. It also performs SafeBrowsing checks to prevent users from accessing malicious sites and Cross-Origin Read Blocking (CORB) checks to protect sensitive cross-site data.
- File and Storage Access: It handles the "invisible, privileged" parts of the browser, such as file access, managed by its internal storage thread.
- Navigation Flow Management: From the moment a user enters a URL in the address bar to when the page starts rendering, the entire navigation flow is coordinated by the browser process. It looks for or starts a renderer process to render the webpage and submits the navigation via IPC (Inter-Process Communication).
- Service Worker Identification: When a navigation request comes in, the network thread checks if the requested domain matches the scope of any registered Service Workers. If it matches, the UI thread starts a renderer process to execute the Service Worker code.
- Input Event Handling: User gestures (such as touch or mouse clicks) are first received by the browser process. Since the content within the tab is handled by the renderer process, the browser process sends the event type and coordinates to the renderer process.
Renderer Process#
- Displaying Web Content: The renderer process controls the entire area within the tab that displays website content.
- Core Rendering Work: Its core task is to convert HTML, CSS, and JavaScript into a webpage that users can interact with. This includes parsing HTML to build the DOM, parsing CSS to compute styles, executing layout to determine the geometry of elements, generating paint records, and layering and compositing the page.
- Main Thread: The main thread of the renderer process handles most of the code sent to the user, including HTML parsing, style computation, layout, generating paint records, and executing JavaScript.
- Worker Threads: If Web Workers or Service Workers are used, some JavaScript code will be handled by the worker threads within the renderer process.
- Compositor Thread and Rasterizer Thread: To efficiently and smoothly render the page, the renderer process also runs a compositor thread and rasterizer threads. The compositor thread is responsible for dividing the page into layers, while the rasterizer threads break these layers into tiles and rasterize them into GPU memory, with the compositor thread then composing them into a frame.
- Service Worker Execution: Service Workers are JavaScript code that runs within the renderer process.
GPU Process#
- Handling GPU Tasks: It independently handles GPU tasks separate from other processes. It is separated into its own process because the GPU handles requests from multiple applications and draws them on the same surface. The final compositor frame is sent to the GPU for display.
Plugin Process#
- Controlling Plugins: It controls any plugins used by the website, such as Flash.
Other Processes#
- Extension Process: Handles the functionality of browser extensions.
- Utility Processes: Handles various other auxiliary tasks.
Benefits of Multi-Process Architecture#
-
Increased Stability: If a tab becomes unresponsive, it only affects the renderer process of that tab, without crashing the entire browser or making all tabs unresponsive.
-
Enhanced Security and Sandbox: The operating system provides mechanisms to restrict process permissions, allowing the browser to sandbox processes like the renderer process that handle user input, limiting their access to specific features like file access, thereby enhancing overall security. The Site Isolation feature further enhances security by running a separate renderer process for each cross-site iframe, which is the most effective way to isolate sites.
-
Servicification: Chrome is running various parts of the browser program as services. On powerful hardware, each service can be split into different processes for greater stability; on resource-constrained devices, these services can be consolidated into a single process to save memory usage.