于永雨的学习笔记
  • 学海无涯
  • 前端基础
    • HTML
      • 语义化标签
      • script标签中defer和async
      • 本地存储
      • 拖拽
      • Web Workers
      • WebSocket
    • CSS
      • 盒模型和box-sizing
      • BFC(块级格式化上下文)
      • 浮动和清除浮动
      • 伪类和伪元素
      • 2倍图、3倍图
      • flex
      • 水平居中、垂直居中
      • 经典布局
        • 两列布局
        • 三列布局
      • 经典实践
      • CSS样式隔离
      • Less vs Sass
    • JavaScript
      • ES
        • 数据类型
          • 1-string
          • 2-number
          • 3-boolean
          • 4-null
          • 5-undefined
          • 6-symbol
          • 7-object
          • 常见类型判断
          • 浅拷贝、深拷贝
        • 数据集合
          • Array
          • 类数组对象
          • Map、WeakMap
          • Set、WeakSet
          • 常见遍历方式
        • 变量
          • 修饰符
          • 变量提升
        • 函数
          • apply、call、bind
          • new
          • this
          • 箭头函数
          • 闭包
          • 防抖和节流
          • 柯里化
        • 原型
          • 原型链
        • 异步
          • 单线程&事件循环
          • 常见异步
          • Promise
            • all和allSettled
            • race和any
            • resolve和reject
        • 模块化
        • 版本特性一览表
      • DOM
        • DOM事件
        • 事件分类
      • BOM
    • TypeScript
    • 浏览器
      • 页面渲染
      • 重绘和回流
      • 跨域
      • 垃圾回收
      • 取消请求
    • Web API
      • EventSource
      • XMLHttpRequest
      • WebSocket
      • IntersectionObserver
  • 前端框架
    • Vue
      • 2.0
        • 列表渲染的key
        • 生命周期
        • diff算法
      • 3.0
        • 改变
        • provide/inject
        • 组件间可复用逻辑封装
        • diff算法
    • React
      • Component
      • Props
      • State
      • Context
      • Effect
      • Hooks
        • hook依赖列表
        • useMemo
        • useCallback
        • useEffect
      • API
        • memo
      • 子组件的无效渲染
      • 组件在开发模式下渲染两次
    • Vue-Router
    • Taro
    • Qiankun
  • 前端方案
    • 错误上报
    • 性能优化
    • 长列表优化原理
    • H5移动端适配
  • 工程化
    • 前端
      • 防止package-lock.json删除
      • 打包ESM和CommonJS
      • babel
      • webpack
      • pnpm
      • 多包管理
      • vite
      • 各种base
    • 服务端
      • Maven
  • 小程序
    • 小程序历史
    • 双线程架构
    • 生命周期
    • 更新机制
  • 服务端
    • Redis
    • Node.js
      • 核心
      • 进程守护
      • Koa
    • Java
      • 安装与配置
    • Restful API
  • DevOps
    • Nginx
    • Docker
      • 核心概念
      • 基础命令
    • K8s
    • Linux
      • shell及脚本
      • 文件目录操作
      • vi/vim
  • 计算机基础
    • 数据结构
      • 栈(Stack)
      • 队列(Queue)
      • 数组(Array)
      • 链表(Linked List)
      • 树(Tree)
      • 图(Graph)
      • 堆(Heap)
      • 散列表(Hash Table)
    • 算法
      • 查找
      • 排序
  • 计算机网络
    • 基础
    • TCP
      • 建立连接(三次握手)
      • 断开连接(四次挥手)
    • UDP
    • HTTP
      • HTTP/2
      • HTTPS
    • 常见网络攻击
      • XSS
      • CSRF
      • DDos
      • MITM
    • 浏览器缓存
  • 经典面试题
    • 箭头函数this-1
    • 箭头函数this-2
    • 数组转树
    • 控制并发数
    • 动态规划-二维数组全排列
    • 柯里化
Powered by GitBook
On this page
  • 一、进程(Process)与线程(Thread)
  • 二、JavaScript与单线程
  • 三、事件循环(Event Loop)
  • 四、宏任务(macrotask)、微任务(microtask)
  1. 前端基础
  2. JavaScript
  3. ES
  4. 异步

单线程&事件循环

一、进程(Process)与线程(Thread)

概念:

  • 进程: CPU资源分配的最小单位

  • 线程: CPU调度的最小单位

(便于记忆:先进程后线程,谐音“进献”)

类比:

  • 进程好比工厂,有单独的专属自己的工厂资源(内存空间)

  • 线程好比工人,多个工人在一个工厂中协作工作,工厂与工人是 1:n的关系。即一个进程由一个或多个线程组成,线程是一个进程中代码的不同执行路线

  • 工厂的空间是工人们共享的,这象征进程的每个线程共享进程内存空间

  • 多个工厂之间独立存在。即进程之间相互独立

实例:

以Chrome浏览器中为例,当你打开一个 Tab 页时,其实就是创建了一个进程,一个进程中可以有多个线程,比如渲染线程、JS 引擎线程、HTTP 请求线程等等

二、JavaScript与单线程

JavaScript是单线程的,是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个,叫主线程。实际上JS引擎中还存在其他的线程,用来处理异步任务,如ajax请求、DOM事件、定时器、I/O操作,统称为工作线程。

总结:

  • 主线程:负责解释和执行JavaScript代码

  • 工作线程:负责处理异步任务,处理完之后将消息放到任务队列

三、事件循环(Event Loop)

过程:

  • 主线程只会做一件事情,就是从消息队列里面不停地取消息、执行消息,再取消息、再执行

  • 消息队列为空时,就会等待,直到消息队列有新消息

  • 主线程只有在将当前的消息执行完成后,才会去取下一个消息

  • 主线程在执行当前消息时可能新的异步任务,新的异步任务会往消息队列添加新消息,循环往复

主体:

  • 主线程

  • 消息队列

  • 异步任务

四、宏任务(macrotask)、微任务(microtask)

消息队列里的消息分为宏任务和微任务两种。

过程:

  • 主线程去消息队列中取任务时,如果微任务队列不为空,就先按序执行微任务队列的微任务;

  • 微任务队列执行完后,开始从宏任务队列中取宏任务进行执行;

  • 每个宏任务间隔先会检查微任务队列,只有微任务队列为空后,才从宏任务队列取出下一个宏任务进行执行。

代码验证:

setTimeout(()=>{
    console.log('timer2')
    Promise.resolve().then(function() {
        console.log('promise2')
    })
}, 10)
setTimeout(()=>{
    console.log('timer1')
    Promise.resolve().then(function() {
        console.log('promise1')
    })
})
Promise.resolve().then(function() {
  console.log('promise0')
})

输出:

promise0
timer1
promise1
timer2
promise2

解析:

  1. Promise是微任务,setTimeout是宏任务

  2. 这段代码执行完后,微任务队列有promise0,宏任务队列有:timer1、timer2

  3. 先执行promise0,然后执行timer1,执行timer1过程中有产生一个微任务promise1

  4. 在执行下一个宏任务(timer2)之前,先执行微任务队列(promise1)

  5. 微任务队列为空,开始执行下一个宏任务timer2,同样在执行过程产生了微任务promise2

  6. 然后开始执行微任务队列

关于宏任务和微任务的执行时机,在Node.js 11 前和浏览器是有差异的:

  • 浏览器端:microtask 在事件循环的 macrotask 执行完之后执行,并且微任务队列里的所有微任务都执行完后再从宏任务队列取出下一个 macrotask 进行执行

  • Node端:microtask 在事件循环的各个阶段之间执行,每个阶段可能有多个macrotask(比如timer阶段多个定时器)连续执行

目前两端已经消除了差异。

参考:

Previous异步Next常见异步

Last updated 1 year ago

更多异步任务及分类参见:

常见异步
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop
https://segmentfault.com/a/1190000004322358
http://www.ruanyifeng.com/blog/2013/10/event_loop.html