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 是单线程,所以要避免耗时同步操作
  • 异步(网络/定时器)是浏览器多线程配合完成
相关推荐
云浪16 小时前
前端二进制数组完全指南:ArrayBuffer、TypedArray、DataView 一次讲透
前端·javascript
铁皮饭盒17 小时前
26年bunjs, elysia+pg一把梭, redis都省了
前端·javascript·后端
kyriewen1 天前
别再对着 TypeScript 报错发呆了:我把 10 个最常见的红色波浪线翻译成了人话
前端·javascript·typescript
free351 天前
从 0 实现一个 Tiny JavaScript VM:项目架构拆解
javascript
徐小夕1 天前
我们开源了一款“框架无关”的思维导图编辑器,3分钟集成到任意系统
前端·javascript·github
PBitW1 天前
GPT训练我的第三天,明白了应该咋说满分回答!😕😕😕
前端·javascript·面试
像我这样帅的人丶你还1 天前
Java 后端详解(四):分页与搜索
java·javascript·后端
labixiong1 天前
还原一个完整符合规范的 Promise(二)
前端·javascript
To_OC1 天前
万字解析《JS 语言精粹》之第五章:继承 5 大核心精髓(JS 原型核心)
前端·javascript·代码规范
裕波1 天前
AI 正在重写应用开发。Vue 与 Vite,给出新的答案。
javascript·vue.js