js异步队列（Js异步、事件循环与消息队列、微任务与宏任务）

我们都知道javascript是一门单线程、异步、非阻塞、解析类型脚本语言

单线程与多线程

js是一个单线的语言如果是多线程的，他们同时操作DOM会使页面一团糟

JavaScript 单线程指的是浏览器中负责解释和执行 JavaScript 代码的只有一个线程，即为JS引擎线程

异步一般是以下：

• 网络请求
• 计时器
• DOM时间监听

宏任务与微任务
Promise同样是用来处理异步的：

console.log('script start')

setTimeout(function() {
    console.log('timer over')
}, 0)

Promise.resolve().then(function() {
    console.log('promise1')
}).then(function() {
    console.log('promise2')
})

console.log('script end')

// script start
// script end
// promise1
// promise2
// timer over

新概念：macro-task（宏任务） 和 micro-task（微任务）。

• macro-task：主代码块、setTimeout、setInterval等（可以看到，事件队列中的每一个事件都是一个 macro-task，现在称之为宏任务队列）
• micro-task：Promise、process.nextTick等
  JS引擎线程首先执行主代码块

事件循环的执行机制：

1. 执行一个宏任务（栈中没有就从事件队列中获取）
2. 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
3. 宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
4. 当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
5. 渲染完毕后，JS引擎线程继续，开始下一个宏任务（从宏任务队
   

宏任务和微任务的区别

• 宏队列可以有多个，微任务队列只有一个,所以每创建一个新的settimeout都是一个新的宏任务队列，执行完一个宏任务队列后，都会去checkpoint 微任务。
• 一个事件循环后，微任务队列执行完了，再执行宏任务队列
• 一个事件循环中，在执行完一个宏队列之后，就会去check 微任务队列