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 是单线程,所以要避免耗时同步操作
  • 异步(网络/定时器)是浏览器多线程配合完成
相关推荐
Larcher18 小时前
React Router 不只是页面跳转:从 SPA 路由到权限守卫的完整实践
javascript·后端
Larcher18 小时前
大模型为什么每次回答都不一样?一文搞懂 Temperature、Top K 与 Top P
javascript·后端
eric-sjq1 天前
10 分钟实战:用 0.6B 本地模型生成中文网页(WanlyFrontend + 编译器全流程)
javascript·机器学习·自然语言处理·html
To_OC1 天前
LC 438 找到所有字母异位词:暴力超时后,我靠滑动窗口一招搞定
javascript·算法·leetcode
kyriewen1 天前
面试官问"这段逻辑为什么这样写"——我才发现,这半年我写的代码,我自己都解释不了
前端·javascript·面试
一壶浊酒..1 天前
Scrape Webpack练习
开发语言·javascript·webpack
默_笙1 天前
⛵ 我用 React + TS 做了个"调色盘",顺便学会了企业级项目的目录架构
前端·javascript
渣波1 天前
拒绝 Redux 样板代码:Zustand 核心原理与实战进阶指南(基础、异步与切片模式)
前端·javascript
C++、Java和Python的菜鸟1 天前
第12章 前端Web进阶(Vue工程化+ElementPlus)
前端·javascript·vue.js
妙码生花1 天前
让各大 AI 整理出来的前端工程命名最简实践(Vue + TS)
前端·javascript·vue.js