😁深入JS(六): 一文让你完全理解浏览器进程与线程

1、什么是进程与线程

1.1、官方解释

进程是cpu资源分配的最小单位

线程是cpu调度的最小单位

1.2、笼统解释

启动一个程序时,操作系统就会给该程序创建一个内存空间(

该内存空是存储程序代码一个执行任务的主线程,这样的一个运行环境(内存空间)就被称为进程
线程依附于进程,进程将任务分为多个细小任务(线程)

1.3、进程与线程特点

进程与进程之间是完全隔离独立运行

一个进程崩溃不会影响其他进程

进程与进程之间的通信,代价较大,需要借助进程通信管道 IPC来传递。
一个进程包含多个线程,每个线程并行执行不同的任务。

其中一个线程崩溃了,那么整个进程也就崩溃了。

线程之间可以相互通信(web Worker)。

2、多进程的浏览器

浏览器进程主要包含:

  • 1个浏览器主进程
  • 1个GPU进程(也可能存在多个,每个标签页都需要一个进程,用于绘制图形)
  • 1个网络进程
  • 多个插件进程(每个插件都会开启一个进程,因为防止一个插件崩溃,造成整个浏览器崩溃)
  • 多个渲染进程(标签页需要独立的进程)

2.1、 browser 进程(主进程)

负责控制浏览器地址栏书签前进后退按钮等,以及负责与其他进程的协调工作,同时提供存储功能(用户信息URL 地址栏)。

2.2、 GPU 进程

图像相关的"重活"都交给 GPU 进程

  • 图形渲染

现代浏览器会将 JPEG/PNG/WebP 的解码任务丢给 GPU 进程

  • 避免频繁回流

transform 代替 top/left,让动画由 GPU 处理。

2.3、网络进程

负责处理与网络相关的任务。

  • 管理网络连接
  • 处理网络请求和响应
  • 处理DNS解析
  • 处理缓存
  • 处理安全问题

在浏览器中,当用户在页面上发起一个网络请求时,该请求首先由渲染进程中的异步 HTTP 线程发起,异步 HTTP 线程会将该请求通过 IPC 传递给网络进程

2.4、插件进程

用于处理浏览器插件的进程(每个插件,就会创建一个进程)

2.5、 渲染进程(重要)

负责将 HTML、CSS 和 JavaScript 转换为可视化的页面。

2.5.1、 渲染线程

负责页面的渲染和绘制;解析 HTML和CSS,构建 DOM树、CSSOM树 、 渲染树(Render 树) ,布局和绘制等。重绘和重排也是发生在该线程中。

GUI 更新会被保存在一个队列之中,等到 JS 引擎线程空闲时,GUI 线程就会立即执行。

「GUI 线程和JS引擎线程是互斥的」

2.5.2、 JS 引擎线程

也称为 JS 内核,负责处理 JavaScript 脚本程序。

GUI 渲染线程与 JS 引擎线程是互斥的

线程不是并行吗?为什么会互斥

渲染线程和JS 线程被有意串行化

JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?

2.5.3、 定时触发线程

指的是计时函数:setIntervalsetTimeout 两个函数。

由于 JS 引擎是单线程的,如果该线程处于堵塞状态,那么就会造成计时不准确,那么就需要单独一个线程进行计时

当计时完成之后,就会把事件回调(任务)添加事件队列中,等待 JS 引擎空闲后去执行。

2.5.4、 异步 HTTP 线程

XMLHttpRequest 在连接后是通过浏览器新开的一个线程请求。

检测到状态发生变化之后,就会事件回调(任务)添加到事件队列中,等待 JS 引擎空闲后去执行。

2.5.5、 事件触发线程

用来控制事件循环的(Event Loop)。

2.5.6、 存储线程

负责处理浏览器的各种存储机制,包括 cookie、localStorage、indexedDB 等。

参考:浏览器原理:进程与线程学习资料 深入理解浏览器中的进程与线程

相关推荐
JieE2121 小时前
LeetCode 56. 合并区间|超清晰 JS 图解思路,面试高频区间题
javascript·算法·面试
runnerdancer2 小时前
LLM是怎么处理messages数组的,提示词缓存又是什么
前端·agent
陈随易3 小时前
VSCode的Copilot扩展支持接入DeepSeek,Kimi了!
前端·后端·程序员
我不是外星人4 小时前
有了 Harness Engineering ,真的还需要研发工程师吗?
前端·后端·ai编程
candyTong4 小时前
RTK 技术原理:一次典型会话里,80% 上下文是怎么省下来的
javascript·后端·架构
IT_陈寒7 小时前
JavaScript的闭包把我坑惨了,说好的内存会自动回收呢?
前端·人工智能·后端
Jackson__8 小时前
分享一个横向滚动案例,带悬停暂停,通用性很强
前端
MariaH8 小时前
git rebase的使用
前端
_柳青杨8 小时前
深入理解 JavaScript 事件循环
前端·javascript
阡陌Jony8 小时前
关于前端性能优化的一些问题:
前端