从启动浏览器到打开网页，发生了什么？

从计算机科学的角度来看，从启动浏览器到输入网址并打开网页的全过程是一个复杂且多层次的协作，涉及网络通信、浏览器架构、JavaScript 执行机制等多个方面。现代浏览器（如Chrome、Firefox）采用了多进程架构，并结合单线程的 JavaScript 运行机制，通过事件循环和专用 Worker API 实现高效的任务处理和页面渲染。以下将详细描述这一过程，并突出 JavaScript 的单线程特性及其在浏览器中的运作方式。

1. 启动浏览器

当你双击浏览器图标启动浏览器时，操作系统会为浏览器创建一个主进程，称为 Browser Process。现代浏览器采用多进程架构，以提升性能、稳定性和安全性。以下是主要进程的职责：

• Browser Process（浏览器进程）：负责管理浏览器用户界面（如地址栏、导航按钮）、处理用户输入、协调其他进程。

• Renderer Process（渲染进程）：每个标签页通常对应一个独立的渲染进程，负责解析 HTML、CSS，执行 JavaScript，并渲染页面内容。

• Network Process（网络进程）：专门处理网络请求，如发送 HTTP 请求和接收服务器响应。

• GPU Process（GPU进程）：利用 GPU 进行图形加速，优化页面绘制和动画效果。

• Plugin Process（插件进程）：处理浏览器插件（如已淘汰的Flash），在现代浏览器中较少使用。

这种多进程设计隔离了不同标签页的任务，即使某个标签页崩溃，也不会影响整个浏览器。

2. 输入网址

在浏览器地址栏输入网址（如 https://example.com）并按下回车后，Browser Process 捕获该事件，开始处理用户的请求。以下是具体步骤：

• URL解析：Browser Process 分析 URL，提取协议（http 或 https）、域名（如 example.com）、路径（如/index.html）等信息。

• 用户界面更新：地址栏显示输入的 URL，浏览器可能还会提示自动补全建议。

3. 网络请求

输入网址后，浏览器发起网络请求以获取网页资源：

• DNS解析：如果 URL 包含域名，Browser Process 通过DNS（域名系统）将域名解析为对应的 IP 地址。

• 建立连接：通过 Network Process 发起 TCP 连接。如果是 HTTPS 协议，还会进行 TLS 握手以建立加密通道。

• 发送 HTTP 请求：Network Process 构造并发送 HTTP GET 请求，包含请求头（如 User-Agent、Accept）等信息。

4. 服务器响应

服务器处理请求后返回响应，浏览器通过 Network Process 接收数据：

• 接收数据：响应包括状态码（如200 OK）、响应头（如Content-Type）和主体（如HTML文件）。

• 资源类型判断：Browser Process 根据响应头的 Content-Type 确定资源类型（HTML、CSS、JavaScript、图像等），并将数据传递给适当的进程处理。

5. 渲染页面

对于HTML页面，渲染过程由 Renderer Process 负责。以下是详细步骤：

• 创建 Renderer Process：如果这是一个新标签页，Browser Process 会创建一个新的渲染进程。

• HTML解析：渲染进程中的 HTML 解析器读取 HTML 内容，构建 DOM 树（Document Object Model），表示页面的结构。

• CSS解析：同时，CSS解析器解析样式表，构建 CSSOM 树（CSS Object Model），定义元素的样式规则。

• JavaScript执行：当解析到 <script> 标签时，HTML解析器暂停，等待 JavaScript 引擎（如 Chrome 的 V8）执行脚本。脚本可能动态修改 DOM 或 CSSOM。

• 构建渲染树：结合 DOM 和 CSSOM，生成渲染树（Render Tree），仅包含需要显示的节点及其样式。

• 布局（Layout）：计算渲染树中每个元素的位置和大小，生成布局信息。

• 绘制（Paint）：将渲染树转换为屏幕上的像素，生成图层。

• 合成（Composite）：若页面包含复杂动画或滚动效果，渲染进程将内容分解为多个图层，利用 GPU Process 进行合成，提升性能。

6. JavaScript 的单线程运作

JavaScript 在浏览器中的执行是单线程的，这对其运行机制和性能有深远影响。以下是具体说明：

单线程模型

• 每个 Renderer Process 包含一个 JavaScript 引擎实例（如V8），负责执行 JavaScript 代码。

• JavaScript 采用单线程设计，即同一时刻只有一个执行线程运行。这种设计简化了开发，避免了多线程编程中的锁和竞争问题。

事件循环（Event Loop）

• 机制：JavaScript 通过事件循环处理异步任务。事件循环不断检查消息队列（Message Queue），从中取出任务并执行。

• 任务类型：包括用户事件（如点击）、定时器（如 setTimeout）、网络回调等。

• 执行流程：

  • 1.执行当前脚本（同步代码）。

  • 2.检查并清空微任务队列（如 Promise 回调）。

  • 3.从消息队列中取下一个任务，重复上述步骤。

微任务与宏任务

• 宏任务（Macrotasks）：如 setTimeout、setInterval、I/O 操作，进入消息队列。

• 微任务（Microtasks）：如 Promise.then、MutationObserver，优先级高于宏任务，在当前任务结束后立即执行。

单线程的优缺点

• 优点：避免线程同步的复杂性，适合UI操作。

• 缺点：长时间运行的 JavaScript 任务会阻塞渲染，导致页面卡顿。

7. Worker API

为弥补单线程的局限性，现代浏览器提供了以下 API，允许在独立线程中运行 JavaScript：

Web Worker

• 作用：在后台线程运行 JavaScript，适合计算密集型任务（如图像处理），不阻塞主线程。

• 通信：主线程与 Web Worker 通过 postMessage 发送消息，onmessage 接收消息。

• 限制：无法直接访问DOM，只能处理纯计算任务。

Shared Worker

• 作用：类似于 Web Worker，但可在多个标签页或 iframe 之间共享，运行在独立进程中。

• 应用场景：适合需要跨标签页同步的任务，如实时聊天状态管理。

• 通信：通过相同的消息机制与多个上下文交互。

Service Worker

• 作用：运行在后台，拦截网络请求、管理缓存、处理推送通知，常用于实现离线应用。

• 生命周期：包括安装（install）、激活（activate）、待机等阶段。

• 功能：

  • 缓存：使用 Cache API 存储资源，实现快速加载和离线访问。

  • 网络代理：可修改请求或响应，如重定向或返回缓存内容。

• 限制：仅支持 HTTPS 环境，无法访问 DOM。

这些 Worker API 扩展了 JavaScript 的能力，使其在单线程主模型之外支持并发处理。

8. 其他 API 和功能

浏览器还提供以下API支持复杂应用：

• IndexedDB：存储大量结构化数据，类似本地数据库。

• Web Storage：包括 localStorage（持久存储）和 sessionStorage（会话存储），用于简单键值对。

• WebRTC：支持实时音视频通信。

• WebGL：基于 GPU 的 3D 图形渲染。

9. 页面加载完成

页面加载的不同阶段会触发特定事件：

• DOMContentLoaded：HTML 解析完成，DOM 树构建完毕。

• load：所有资源（如图片、样式表）加载完成。

10. 用户交互

页面加载后，JavaScript 可监听用户事件：

• 事件监听：通过 addEventListener 捕获点击、滚动等事件。

• 事件传播：事件按捕获（从根到目标）和冒泡（从目标到根）两个阶段传播，开发者可选择处理阶段。

总结

从启动浏览器到打开网页，涉及多进程协作：Browser Process 管理全局，Renderer Process 渲染页面，Network Process 处理请求，GPU Process 优化图形。JavaScript 的单线程特性通过事件循环实现异步处理，尽管存在阻塞风险，但 Worker API 提供了并发能力。这种架构设计兼顾了安全性、性能和开发便捷性，是现代浏览器的核心优势。

参阅资料

• Inside look at modern web browser | Chrome for Developers