JavaScript 语言的一大特点是单线程。

线程和进程

线程是 cpu 调度的最小单位（线程是进程上的一次程序运行单位，一个进程可以有多个线程）。
进程是 cpu 资源分配的最小单位（是能拥有资源和独立运行的最小单位）。

浏览器是多进程的

每开一个标签页系统就创建一个独立的进程，一个进程中可能包含如渲染线程、JS 引擎线程、HTTP 请求线程等。
注意：由于浏览器的优化机制某些进程可能会被合并。

为什么JavaScript是单线程的

如果 JavaScript 是多线程的，假定 procces1 和 procces2 同时对同一个 DOM 作出操作，浏览器应该以哪一个为准，所以 JavaScript 只能为单线程。

事件循环

任务分为同步任务和异步任务，同步任务会进入主线程，异步任务则会进入事件队列 ( Event Queue )。主线程中的任务执行完毕后会从事件队列中取出放入执行栈。

任务除了分为同步任务和异步任务，还分为微任务和宏任务。

微任务（microtask）包括：process.nextTick，Promise，MutationObserver
宏任务（macrotask）包括：主代码script，setTimeout，setInterval

事件循环的执行顺序为

事件循环开始，script 代码块做为宏任务进入主线程执行
同步任务移入主线程执行，异步任务进入事件队列
主线程执行完成后，取出事件队列中的微任务执行
微任务执行完毕后，事件循环结束
取出事件队列中的宏任务，开始新一轮事件循环
......

示例：

setTimeout(() => {
  new Promise((resolve) => {
    console.log('1')
    resolve()
  }).then(() => {
    console.log('2')
  })
  console.log('3')
}, 0)

console.log('4')

new Promise(resolve => {
  console.log('5')
  resolve();
}).then(() => {
  console.log('6')
})

setTimeout(() => {
  new Promise((resolve) => {
    console.log('7')
    resolve();
  }).then(() => {
    console.log('8')
  })
  console.log('9')
}, 0)

分析：

第一轮事件循环:
- script 作为宏任务进入主线程
- 遇到 setTimeout，注册其回调函数作为宏任务移入事件队列，记为 setTimeout1
- 遇到 console.log，输出'4'
- 遇到 Promise，输出'5'，注册其回调函数作为微任务进入事件队列，记为 then
- 遇到 setTimeout，注册其回调函数作为宏任务移入事件队列，记为 setTimeout2
- 宏任务执行完毕，执行事件队列中的微任务 then，输出'6'
第一轮事件循环结束输出'4'、5'、'6'
第二轮事件循环：
- 执行宏任 setTimeout1
- 遇到 Promise，输出'1'，注册其回调函数作为微任务进入事件队列，记为 then
- 遇到 console.log，输出'3'
- 宏任务执行完毕，执行事件队列中的微任务 then，输出'2'
第二轮事件循环结束输出'1'、'3'、'2'
第三轮事件循环：
- 遇到 Promise，输出'7'，注册其回调函数作为微任务进入事件队列，记为 then
- 遇到 console.log，输出'9'
- 宏任务执行完毕，执行事件队列中的微任务 then，输出'8'
第三轮事件循环结束输出'7'、'9'、'8'

代码执行完毕输出结果为'4'、5'、'6'、'1'、'3'、'2'、'7'、'9'、'8'

参考：前端面试之道