你的位置：首页 > 业界 > 浏览器的多进程、多线程运行机制

浏览器的多进程、多线程运行机制

业界 admin 2025-01-27 39浏览 0评论

多进程的浏览器

进程是操作系统分配资源的基本单位，而浏览器是多进程的程序。浏览器通过多个tab页来加载多个页面，标准上一个tab页应对应浏览器的一个进程。浏览器之所以能加载出页面，是因为操作系统给浏览器的各个进程分配了资源（CPU、内存）。

浏览器在打开后具体包含以下主要进程（未开始打开tab页加载页面）：

Browser进程：浏览器的主进程，主要作用有
- 控制浏览器的交互动作，例如：打开关闭页面、前进后退按钮、接受URL输入等
- 网络资源的下载
- 将renderer渲染进程的结果展示到用户界面
插件进程：每种浏览器插件对应一个进程。
GPU进程：用于3D绘制等，最多只有一个。

浏览器初始化完成后，每打开一个tab页，即多增加一个渲染进程。

相对于单进程浏览器，多进程有优点也有缺点，但肯定是利大于弊
优点：

缺点：

渲染进程控制着整个页面的加载、渲染、JS代码执行和事件循环等。因此分为多个线程来分别执行不同的任务。

UI渲染线程
- 负责结合页面的DOM节点树和CSSOM树来渲染render树。
- 在界面reflow或者repaint的时候会执行
JS引擎线程
- 负责解析并执行JS代码，与UI渲染线程是互斥的，无法同时执行两者。
- JS引擎会不断地遍历事件队列，从中提取出事件来执行。
事件触发线程
- 负责维护事件队列，当一些事件被触发时，该线程会把事件添加至事件队列的末尾，等待JS引擎处理。
定时器线程
- 负责计时任务，例如setTimeout的定时不可能由JS引擎来计时（JS引擎的阻塞会导致计时不准确），因此需要该线程来计时，计时完成后触发事件。
异步http请求线程
- XMLHttpRequest连接是通过浏览器新开该线程来实现，该线程会监听连接的状态是否改变。在状态改变时触发相应的回调函数。

前面提到JS引擎线程的执行会阻塞UI渲染线程，当JS引擎需要进行大量计算时，就会造成UI渲染线程的阻塞，从而导致页面卡顿现象。针对这个问题，HTML5新提出了Web Worker。

具体机制是JS引擎向浏览器申请新开一个Web Worker的子线程，将大量计算放在Web Worker线程中计算。当计算完成时Web Worker通过postMessage将结果返回给JS引擎。

我个人开了一个公众号“前端搬运小工”，我会定期推送优秀的前端精选文章，拒绝无脑基础入门的文章，带给你不一样的前端视角。

浏览器在打开后具体包含以下主要进程（未开始打开tab页加载页面）：

Browser进程：浏览器的主进程，主要作用有
- 控制浏览器的交互动作，例如：打开关闭页面、前进后退按钮、接受URL输入等
- 网络资源的下载
- 将renderer渲染进程的结果展示到用户界面
插件进程：每种浏览器插件对应一个进程。
GPU进程：用于3D绘制等，最多只有一个。

浏览器初始化完成后，每打开一个tab页，即多增加一个渲染进程。

相对于单进程浏览器，多进程有优点也有缺点，但肯定是利大于弊
优点：

缺点：

渲染进程控制着整个页面的加载、渲染、JS代码执行和事件循环等。因此分为多个线程来分别执行不同的任务。

UI渲染线程
- 负责结合页面的DOM节点树和CSSOM树来渲染render树。
- 在界面reflow或者repaint的时候会执行
JS引擎线程
- 负责解析并执行JS代码，与UI渲染线程是互斥的，无法同时执行两者。
- JS引擎会不断地遍历事件队列，从中提取出事件来执行。
事件触发线程
- 负责维护事件队列，当一些事件被触发时，该线程会把事件添加至事件队列的末尾，等待JS引擎处理。
定时器线程
- 负责计时任务，例如setTimeout的定时不可能由JS引擎来计时（JS引擎的阻塞会导致计时不准确），因此需要该线程来计时，计时完成后触发事件。
异步http请求线程
- XMLHttpRequest连接是通过浏览器新开该线程来实现，该线程会监听连接的状态是否改变。在状态改变时触发相应的回调函数。

我个人开了一个公众号“前端搬运小工”，我会定期推送优秀的前端精选文章，拒绝无脑基础入门的文章，带给你不一样的前端视角。