😁深入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 等。

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

相关推荐
UI前端开发工作室14 分钟前
数字孪生技术为UI前端提供新视角:产品性能的实时模拟与预测
大数据·前端
Sapphire~17 分钟前
重学前端004 --- html 表单
前端·html
Maybyy39 分钟前
力扣242.有效的字母异位词
java·javascript·leetcode
遇到困难睡大觉哈哈43 分钟前
CSS中的Element语法
前端·css
Real_man1 小时前
新物种与新法则:AI重塑开发与产品未来
前端·后端·面试
小彭努力中1 小时前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
老马聊技术1 小时前
日历插件-FullCalendar的详细使用
前端·javascript
zhu_zhu_xia1 小时前
cesium添加原生MVT矢量瓦片方案
javascript·arcgis·webgl·cesium
咔咔一顿操作1 小时前
Cesium实战:交互式多边形绘制与编辑功能完全指南(最终修复版)
前端·javascript·3d·vue
coding随想2 小时前
JavaScript中的系统对话框:alert、confirm、prompt
开发语言·javascript·prompt