现代浏览器（以 Chrome 为代表）早已抛弃早期的单进程设计，全面采用 多进程架构（Multi-Process Architecture）。这一设计看似复杂，核心却是为了解决实际使用中的关键问题，今天就用最通俗的方式拆解清楚，不管是入门还是面试都够用。
一、为什么浏览器非要用多进程？
先给一个面试直接能用的核心动机，记牢就行：
浏览器必须同时兼顾 稳定性、安全性、性能 三大核心需求。单进程浏览器有个致命问题——一旦崩溃，整个浏览器直接挂掉。所以现代浏览器把不同功能拆分到不同进程，实现“局部故障不影响整体”。
举个直观例子
日常使用中很容易遇到这些情况：某个网页的 JS 陷入死循环、视频播放占满显卡资源、单个页面突然崩溃。而多进程架构的核心优势就是——这些问题都不会影响其他标签页或浏览器本身，最多只是出问题的页面关闭，不耽误整体使用。
二、浏览器主要有哪些进程？（核心重点）
先记一个核心结论，帮你建立整体认知：
浏览器 ≈ 1个浏览器主进程 + 多个功能进程 + 多个渲染进程
下面逐个拆解，重点内容会特别标注，面试常考的地方也会提醒。
1. Browser Process（浏览器主进程）—— 浏览器的“大总管”
它不负责具体的页面内容渲染，只做全局管理工作，是整个浏览器的核心调度者。
主要职责：
-
管理浏览器窗口（地址栏、书签栏、前进后退按钮等界面元素）；
-
负责标签页的创建与销毁；
-
调度其他进程的创建、销毁与协作；
-
处理用户输入（比如在地址栏输内容、按快捷键）；
-
管理各类权限（下载、摄像头调用、弹窗通知等）。
举个实际场景：在地址栏输入URL
-
浏览器主进程首先接收你的输入；
-
判断你输入的是搜索关键词（比如“天气”）还是具体网址（比如“www.baidu.com”）；
-
创建或复用一个渲染进程，专门用来处理这个页面；
-
把URL交给网络进程，让它去发起请求获取资源。
这里一定要记住：主进程只做“调度管理”，不碰页面渲染的具体工作。
2. Renderer Process（渲染进程）—— 重点中的重点
这是面试高频考点，也是页面能正常显示的核心进程。
一句话定义
每个标签页（严格来说是每个站点实例）基本都会对应一个独立的渲染进程，实现进程隔离。
核心职责
所有和页面内容相关的工作，都由它负责：
-
解析HTML和CSS代码；
-
构建DOM树（HTML解析结果）和CSSOM树（CSS解析结果）；
-
执行页面中的JavaScript代码；
-
计算页面布局、绘制页面内容；
-
响应用户在页面内的交互（比如点击按钮、输入文字）。
内部线程（面试加分项）
渲染进程内部不是单线程工作，而是由多个线程协作：
-
主线程：负责执行JavaScript代码，同时处理HTML/CSS解析、布局绘制等渲染工作；
-
合成线程（Compositor）：负责页面图层合成，让动画更流畅；
-
光栅线程（Raster）：负责把页面元素转换成像素，供最终显示。
举个真实场景：打开一个React页面
-
HTML文件下载完成后，渲染进程开始解析HTML，生成DOM树；
-
同时下载页面所需的CSS文件，解析后生成CSSOM树；
-
执行页面中的JavaScript代码（包括React框架代码），通过JS操作DOM和CSSOM；
-
根据DOM树和CSSOM树计算页面布局，确定每个元素的位置和样式；
-
绘制页面内容，再通过合成线程、光栅线程处理后，呈现到屏幕上；
-
当用户点击页面按钮时，主线程执行对应的JS回调，响应用户交互。
这里有个高频考点：JavaScript会阻塞页面渲染，本质就是因为JS执行和渲染工作共享同一个主线程，JS执行时会占用主线程资源，导致渲染工作暂停。
为什么要做渲染进程隔离？
主要为了安全和稳定，两点原因很明确：
-
安全层面：JavaScript属于不可信代码，每个站点一个渲染进程相当于一个“沙箱”，能防止跨站点窃取数据；
-
稳定层面：某个页面崩溃（比如JS死循环），只会影响对应的渲染进程，不会拖垮其他标签页或浏览器本身。
面试常问：一个标签页就对应一个进程吗？
标准回答（记牢不踩坑）：
-
大多数情况下是这样的；
-
Chrome有个“Site Isolation（站点隔离）”机制；
-
同源页面（比如同一个网站的不同页面）可能会复用同一个渲染进程，节省资源；
-
跨站点页面（不同域名）通常会使用独立的渲染进程，保证隔离性。
3. Network Process（网络进程）—— 网络请求的“专属管家”
核心职责
统一管理浏览器所有的网络请求，避免重复工作，提升效率：
-
处理HTTP、HTTPS等协议的请求；
-
进行DNS查询（把域名转换成IP地址）；
-
建立和管理TCP/TLS连接；
-
管理网络缓存（已下载的资源缓存起来，下次无需重复下载）。
为什么要单独拆成一个进程？
网络请求是浏览器的高频操作，且属于共享资源。单独拆分后，多个标签页可以复用同一个网络连接，避免每个页面都单独建立连接，大幅降低资源消耗。
举个例子
同时打开3个标签页，都请求“api.example.com”这个接口。此时网络进程会复用同一个TCP连接，而不是建立3个独立连接，减少网络开销和延迟。
4. GPU Process（GPU进程）—— 图形渲染的“加速器”
核心作用
负责图形渲染加速，让页面动画、视频播放更流畅：
-
参与页面图层合成，提升渲染效率；
-
处理CSS动画、transform等属性的视觉效果；
-
支持WebGL绘图、视频解码等图形密集型操作。
举个例子
当你给元素加了这样的CSS：
div {
transform: translateZ(0);
}
这句话会触发GPU加速，让div的动画更流畅。本质就是GPU进程参与了这个元素的图层合成，减轻了主线程的压力。
为什么要独立成进程？
GPU操作属于图形密集型工作，容易出现崩溃或卡顿。单独隔离成进程后，即使GPU进程出问题，也只会影响图形渲染，不会导致整个浏览器崩溃。
5. 其他辅助进程（了解即可，面试很少问）
除了上面4个核心进程，浏览器还有一些辅助进程，负责特定场景的功能：
-
插件进程：比如Chrome的PDF预览插件、Flash插件（现在基本淘汰），单独隔离避免插件崩溃影响浏览器；
-
扩展进程：管理Chrome浏览器插件（比如广告拦截插件、密码管理器）；
-
辅助工具进程：处理一些小众功能，比如桌面通知、文件打印等。
三、完整流程串讲（面试最爱考，直接背）
把上面的进程串联起来，还原从输入URL到页面显示的完整过程，面试时这样讲，逻辑清晰又加分：
-
用户在浏览器地址栏输入URL；
-
浏览器主进程接收输入，判断是搜索还是URL，同时创建/复用一个渲染进程；
-
主进程把URL交给网络进程，让网络进程发起请求；
-
网络进程进行DNS查询、建立TCP连接，获取页面资源（HTML、CSS、JS等），并把资源返回给渲染进程；
-
渲染进程解析资源、执行JS、计算布局、绘制页面，期间GPU进程参与图层合成，提升渲染流畅度；
-
最终页面内容显示在屏幕上，渲染进程持续响应用户交互。
四、多进程vs单进程（对比题，面试必背）
| 对比维度 | 单进程浏览器 | 多进程浏览器 |
|---|---|---|
| 稳定性 | 差（一处崩溃，整个浏览器挂掉） | 高（局部进程崩溃不影响整体） |
| 安全性 | 差（无隔离，恶意代码易扩散） | 高（进程隔离+沙箱机制） |
| 性能 | 易阻塞（所有工作挤在一个线程） | 更流畅（进程/线程并行协作） |
| 内存占用 | 低（无需多进程资源开销） | 较高（多进程需要额外内存） |
| 面试补充一句点睛之笔：多进程浏览器本质是“用内存换稳定性和安全性”，这是现代浏览器的核心设计权衡。 |
五、面试常见追问速答（避免踩坑）
-
Q1：JavaScript在哪个进程执行？ A：渲染进程的主线程。
-
Q2：为什么JS会阻塞页面渲染？ A：因为JS执行和页面渲染共享渲染进程的主线程，同一时间只能做一件事，JS执行时会阻塞渲染工作。
-
Q3：跨域限制是浏览器还是服务器做的？ A：浏览器的安全策略，由渲染进程和网络进程共同配合实现（网络进程拦截跨域请求，渲染进程限制DOM访问）。
六、过关标准（自查是否掌握）
如果能做到以下4点，说明浏览器架构这块已经掌握，面试基本不会被深挖：
-
能画出浏览器5个核心进程（主进程、渲染进程、网络进程、GPU进程、辅助进程）；
-
能完整串讲“输入URL→页面显示”的全流程，明确每个进程的分工；
-
能解释清楚“为什么要用多进程”，以及多进程带来的优势与权衡；
-
能准确回答“标签页与渲染进程的关系”，以及相关面试追问。
