前端随笔 FE-Essay

# JavaScript 是单线程

本文来源：全方位了解 JavaScript 的 Event Loop (opens new window)

首先我们了解一下进程和线程的概念和关系：

  • 进程：运行的程序就是一个进程，比如你正在运行的浏览器，它会有一个进程；
  • 线程：程序中独立运行的代码段。一个进程 由单个或多个 线程 组成，线程是负责执行代码的。

单线程与多线程的区别：

  • 单线程：从头执行到尾，一行行执行，如果其中一行代码报错，那么剩下的代码将不再执行。同时容易代码阻塞。
  • 多线程：代码运行的环境不同，各线程独立，互不影响，避免阻塞。

为了保证 JavaScript 的主要运行环境（浏览器），JavaScript 被设计成了单线程语言。

为了充分利用多核处理器的计算能力，HTML5 提出了 Web Worker 标准，允许 JavaScript 脚本创建多个子线程，但是子线程完全受控于主线程，且不得操作 DOM。因此，新标准并没有改变 JavaScript 单线程的本质。

# 执行栈、任务队列

Event Loop

在上图中，主线程运行的时候，产生 堆（heap） 和 栈（stack），栈中的代码调用各种 API，他们在 任务队列 中加入各种事件（DOM Event，ajax，setTimeout...），只要栈中的代码执行完毕，主线程就会去读取任务队列，依次执行那些时间对应的回调函数。

  • 堆（heap）：对象被分配在一个堆中，即用以表示一个大部分非结构化的内存区域。

  • 执行栈（stack）：运行同步代码。执行栈中的代码（同步任务），总是在读取 任务队列（异步任务）之前执行。

  • 任务队列（callback queue）：

    任务队列 是一个事件的队列（也可以理解成消息的队列），IO 设备完成一项任务，就在 任务队列 中添加一个事件，表示相关的异步任务可以进入 执行栈 了。主线程读取 任务队列，就是读取里面有哪些事件。

    任务队列 中的事件，除了 IO 设备的事件外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等）。只要指定过回调函数，这些事件发生时就会进入 任务队列，等待主线程读取。

    所谓 回调函数（callback），就是那些会被主线程挂起来的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。

    任务队列 是一个先进先出的数据结构，排在前面的事件，优先被主线程读取。主线程的读取过程基本是自动的，只要执行栈一清空。任务队列 上第一位的事件就自动进入主线程。但是由于存在后文提到的 定时器 功能，主线程首先要检查一下执行时间，某些事件只有到了规定的时间才能返回主线程。

# 同步任务、异步任务、宏任务、微任务

单线程即意味着所有人物都需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就必须一直等着。

# 同步任务、异步任务

为此，JavaScript 设计者在广义上将所有任务分成两种：同步任务（synchronous）、异步任务（asynchronous），运行机制如下：

  1. 所有同步任务都在主线程上执行，形成一个 执行栈；
  2. 主线程外，还存在一个 任务队列，只要异步任务有了运行结果，就在任务队列中放置一个事件；
  3. 一旦执行栈中所有同步任务执行完毕，系统就会取出任务队列中事件对应的回调函数进入执行栈，开始执行；
  4. 主线程不断重复上面的第三部。

事件循环

# 宏任务、微任务

除了广义上的定义，我们将任务进行更精细的定义，分为：

  • 宏任务（macro-task）

    包括整体代码 script，setTimeout，setInterval，ajax，dom操作

  • 微任务（micro-task）

    Promise

运行机制如下：

  1. 首先将执行栈最开始的所有同步代码（宏任务）执行完成；
  2. 检查是否有微任务，如有则执行所有微任务；
  3. 取出任务队列中事件对应的回调函数（宏任务）进入执行栈并执行完成；
  4. 再检查是否有微任务，如有则执行所有的微任务；
  5. 主线程不断重复上面的 3、4 步。

事件循环

以上两种运行机制，主线程都从任务队列中读取事件，这个过程是循环不断的，所以整个这种运行机制又称为 Event Loop（事件循环）

# setTimeout、setInterval

这两个函数内部运行机制完全一致，区别在于前者一次性执行，后者反复执行。

两者产生的任务都是 异步任务，也属于 宏任务。

setTimeout 接收两个参数，第一个是回调函数，第二个是延迟执行的毫秒数。

如果第二个参数设置为0或者不设置，意思 并不是立即执行，而是指定某个任务在主线程最早可得到的空闲时间执行，也就是说，尽可能早得执行。他在 任务队列 的尾部添加一个事件，因此要等到同步任务和 任务队列 现有的事件都处理完，才会得到执行。

所以说，setTimeout 和 setInterval 第二个参数设置的时间并不是绝对的，它需要根据当前代码最终执行的时间来确定的，简单来说，如果当前代码执行的时间超出了推迟执行的时间，那么 setTimeout(fn, 100) 就和 setTimeout(fn, 0) 没有区别了。

# Promise

Promise 相对来说比较特殊，在 new Promise() 中传入的回调函数是会 立即执行 的，但是它的 then() 方法是在 执行栈之后，任务队列之前 执行的，它属于 微任务。

# process.nextTick

process.nextTick 是 Node.JS 提供的一个与 任务队列 有关的方法，它产生的任务是放在 执行栈的尾部，并不属于 宏任务 和 微任务，因此它的任务 总是发生在所有异步任务之前。

# setImmediate

setImmediate 是 Node.js 提供的与 任务队列 有关的方法，它产生的任务追加到 任务队列 的尾部，它和 setTimeout(fn, 0) 很像，但是优先级低于 setTimeout。

有时候，setTimeout 会在 setImmediate 之前执行，有时会在之后执行，这是因为虽然 setTimeout 第二个参数设置为 0 或者不设置，但是 setTimeout 源码中，会指定一个具体的毫秒数（nodejs 为 1ms，浏览器为 4ms），而由于当前代码执行时间收到执行环境的影响，执行时间有所起伏。

# 优先级

  1. 同步任务（宏任务）
  2. process.nextTick
  3. Promise（微任务）
  4. setTimeout(fn)、setInterval(fn) （宏任务）
  5. setimmediate（宏任务）
  6. setTimeout(fn, time)、setInterval(fn, time) time >0

← JS相关.md →