js 进程与线程的讲解

进程与线程 最通俗易懂讲解(前端/后端都必须懂)

这是计算机基础核心知识点,面试必问,和你写 Vue、React、Node.js 息息相关。

我用生活例子 + 代码场景讲,保证一听就懂。


一、先给你最核心结论(背会)

  1. 进程(Process)

    • 操作系统分配资源的最小单位
    • 一个程序运行,就是一个进程
    • 进程之间相互独立,互不干扰
  2. 线程(Thread)

    • 进程内的执行单元 ,CPU 调度的最小单位
    • 一个进程里至少有一个线程
    • 同一个进程内的线程共享内存/资源
  3. 一句话总结
    进程是工厂,线程是工人。
    一个工厂可以有多个工人,工人共享工厂资源。


二、超通俗生活例子(秒懂)

1. 进程 = 一个独立工厂

  • 打开 Chrome 浏览器 → 1 个进程
  • 打开 VS Code → 1 个进程
  • 打开 微信 → 1 个进程
  • 工厂之间完全独立,一个工厂倒闭,不影响其他工厂

2. 线程 = 工厂里的工人

  • 浏览器这个工厂里:
    • 工人A:渲染页面
    • 工人B:执行 JS 代码
    • 工人C:发送网络请求
  • 工人共享工厂资源(内存、数据、缓存)

三、前端最关心:浏览器 / JS 里的进程与线程

1. 浏览器是多进程

每开一个标签页,基本就是一个新进程

好处:一个标签页崩溃,整个浏览器不会崩

2. JS 是单线程的!(最重要)

JavaScript 引擎只有一个主线程执行代码。

  • 同一时间只能做一件事
  • 所以会有阻塞(比如死循环会让页面卡死)

这就是为什么:
JS 不能写耗时操作(复杂计算、同步请求),会卡住页面!


四、进程 vs 线程 对比表(面试必背)

对比项 进程 线程
本质 程序的运行实例 进程内的执行路径
资源 独立拥有内存、资源 共享进程资源
开销 创建/销毁开销大 创建/切换开销小
通信 进程间通信麻烦 线程间通信简单
稳定性 一个崩溃不影响其他 一个崩溃,整个进程都崩
例子 打开微信、浏览器 JS 主线程、渲染线程

五、最经典面试题(直接背答案)

1. 进程和线程的区别?

  • 进程是资源分配单位,线程是执行单位
  • 进程相互独立,线程共享资源
  • 进程开销大,线程开销小
  • 进程稳定性高,线程稳定性低

2. 为什么 JS 是单线程?

因为 JS 主要用来操作 DOM

如果是多线程:

  • 线程A删节点
  • 线程B改节点
    浏览器就乱套了
    所以 JS 设计成单线程,保证 DOM 操作安全。

3. 单线程 JS 怎么处理异步?(ajax/定时器/fetch)

EventLoop(事件循环) + 多线程协作

  • JS 主线程执行代码
  • 网络请求、定时器交给浏览器其他线程
  • 完成后再通知主线程执行回调

六、结合你学的 Vue3 / React18

  1. 不要在主线程做大量计算
    会阻塞渲染 → 页面卡顿
  2. 异步请求(axios/fetch)
    都是浏览器其他线程处理,不阻塞 JS
  3. WebWorker
    可以让 JS 开启多线程 ,处理复杂计算
    (但不能操作 DOM)

七、终极精简总结(10 秒记住)

  1. 进程 = 工厂,独立资源
  2. 线程 = 工人,共享资源
  3. 浏览器多进程,标签页互不影响
  4. JS 单线程,所以不能阻塞
  5. 异步靠 EventLoop,不是多线程 JS

总结

  • 进程是程序运行的独立容器
  • 线程是容器里干活的执行单元
  • JS 是单线程,所以要避免耗时同步操作
  • 异步(网络/定时器)是浏览器多线程配合完成
相关推荐
遇见你...4 小时前
TypeScript
前端·javascript·typescript
Highcharts.js4 小时前
Highcharts Grid 中文站正式上线:表格数据处理的全新选择
前端·javascript·数据库·表格数据·highcharts·可视化图表·企业级图表
阿正的梦工坊7 小时前
JavaScript 微任务与宏任务完全指南
开发语言·javascript·ecmascript
2301_7990730211 小时前
基于 Next.js + 火山引擎 AI 的电商素材智能生成工具实战——字节跳动前端训练营成果
javascript·人工智能·火山引擎
kyriewen1113 小时前
项目做了一半想重写?这套前端架构让你少走3年弯路
前端·javascript·chrome·架构·ecmascript·html5
爱折腾的军哥15 小时前
首发 | OpenTaiji WFGY 防幻觉系统:让 AI Agent 不再"胡说八道"
javascript
颜酱15 小时前
从零实现「拍照记单词」小应用(可复刻版)
前端·javascript·人工智能
大猫会长15 小时前
AudioContext给音频提高音量
前端·javascript·音视频
WayneYang16 小时前
JavaScript ES6+ (ES2015~ES2024) 全特性整理
前端·javascript
JustNow_Man16 小时前
Bun 常用命令速查清单(TypeScript 编译篇)
前端·javascript·typescript