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

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

相关推荐
张风捷特烈28 分钟前
匠心千游 | 纯 AI 打造休闲小游戏
前端·微信小程序·游戏开发
longze_75 小时前
Vue中:deep()和 ::v-deep选择器的区别
前端·javascript·vue.js
太阳伞下的阿呆8 小时前
本地环境vue与springboot联调
前端·vue.js·spring boot
阳光是sunny8 小时前
走进微前端(1)手写single-spa核心原理
前端·javascript·vue.js
烛阴9 小时前
Ceil -- 从平滑到阶梯
前端·webgl
90后的晨仔9 小时前
🔍Vue 模板引用(Template Refs)全解析:当你必须操作 DOM 时
前端·vue.js
90后的晨仔9 小时前
👂 Vue 侦听器(watch)详解:监听数据的变化
前端·vue.js
90后的晨仔9 小时前
深入浅出 Vue 的 computed:不仅仅是“计算属性”那么简单!
前端·vue.js
Nan_Shu_6149 小时前
学习:入门uniapp Vue3组合式API版本(17)
前端·vue.js·学习·uni-app
止观止10 小时前
Remix框架:高性能React全栈开发实战
前端·react.js·前端框架·remix