浏览器下的事件循环机制（Event Loop），含四个代码示例及相关解析

一，基本概念：

同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

异步任务：不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

二，常见的宏任务与微任务：

macrotask：setTimeout，setInterval，setImmediate，requestAnimationFrame，I/O，UI rendering

microtask: process.nextTick，Promises，Object.observe，MutationObserver

Promise是一个构造函数，调用的时候会生成Promise实例。当Promise的状态改变时会调用then函数中定义的回调函数。我们都知道这个回调函数不会立刻执行，他是一个微任务会被添加到当前任务队列中的末尾，在下一轮任务开始执行之前执行。

async/await成对出现，async标记的函数会返回一个Promise对象，可以使用then方法添加回调函数。await后面的语句会同步执行。但 await 下面的语句会被当成微任务添加到当前任务队列的末尾异步执行。

三，遇到事件循环机制问题，运行步骤如下：

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

四，程序

【题1】

console.log("我是开始");

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

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

console.log('我是结束');

执行结果：我是开始 我是结束 promise1 promise2 setTimeout

console.log("我是开始");         //主程序代码（宏任务1）

setTimeout(function() {         //产生了一个新的宏任务2——————放入宏任务队列
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {    //产生了微任务1——————放入微任务队列
  console.log('promise1');
}).then(function() {                   //产生了微任务2——————放入微任务队列
  console.log('promise2');
});

console.log('我是结束');        //主程序代码（宏任务1）