前端进阶——浏览器篇

news2024/9/21 22:45:15

浏览器如何工作（一）进程架构

浏览器的工作过程复杂而高效，其核心在于其进程架构的设计。以下是对浏览器进程架构的详细解析：

一、浏览器的主要进程

现代浏览器大多采用多进程多线程的架构，以Chrome浏览器为例，其主要进程包括：

浏览器进程（Browser Process）：
- 功能：作为浏览器的主进程，负责浏览器的整体控制和资源协调，包括用户界面的展示（如地址栏、书签栏等）、网络请求的管理、以及与其他进程的通信等。
- 关键线程：
  - UI线程：控制浏览器上的按钮及基础界面的展示。
  - 网络线程（Network Thread）：主要用于处理网络请求，如DNS解析、建立TLS连接等。
  - 存储线程（Storage Thread）：用于控制文件访问。
  - IO线程：主要用于进程间通信。
渲染进程（Renderer Process）：
- 功能：负责页面的渲染工作，包括HTML、CSS的解析，JavaScript的执行，以及页面的布局和绘制等。
- 数量：通常每个标签页对应一个渲染进程，但也可能根据浏览器的优化策略有所不同（如Process-per-site-instance、Process-per-site等模式）。
- 关键线程：
  - GUI渲染线程：负责页面的渲染工作，如解析HTML和CSS、构建DOM树、CSSOM树、Render树，以及绘制页面等。
  - JavaScript引擎线程：负责解析和执行JavaScript代码，与GUI渲染线程互斥。
  - 定时器线程：处理setInterval和setTimeout等定时器任务，计时完毕后将任务添加到事件队列中等待JavaScript引擎线程执行。
  - 异步HTTP请求线程：当发起网络请求时，浏览器会新开一个线程来处理这些请求，并在请求状态变化时将回调放入事件队列中。
  - 事件触发线程：用于控制事件循环，将任务添加到事件队列中，并在适当的时候将其分发给JavaScript引擎线程执行。
GPU进程（GPU Process）：
- 功能：负责处理与图形渲染相关的任务，如将渲染进程计算出的图像帧绘制在屏幕上。
插件进程（Plugin Process）：
- 功能：负责运行浏览器插件，如Flash插件等。这些插件通常运行在独立的进程中，以提高安全性和稳定性。

二、浏览器的工作流程

从用户输入URL到页面展示的过程大致如下：

处理输入：用户在地址栏输入URL并按下回车后，UI线程会判断输入内容是否为URL，并交给网络线程处理。
网络请求：网络线程进行DNS解析、建立TLS连接等网络操作来请求对应资源。如果收到服务器重定向头部，则与UI线程沟通并发起新的请求。
读取响应：网络线程收到服务器响应后，解析HTTP报文并根据响应头Content-Type确定响应主体类型。如果是HTML文件，则交给渲染进程处理；如果是其他文件，则交给下载管理器或相应处理模块。
页面渲染：渲染进程接收到HTML数据后，开始解析HTML内容并构建DOM树和Render树。随后进行页面布局和绘制，并将图像帧交给GPU进程绘制在屏幕上。
事件处理：在渲染过程中，如果遇到JavaScript代码或用户交互事件（如点击、滚动等），则会将这些事件添加到事件队列中等待JavaScript引擎线程处理。
页面更新：当JavaScript引擎线程空闲时，会从事件队列中取出任务执行，并可能导致DOM树的更新和页面的重新渲染。