所谓单线程，无非就是同步队列和异步队列，js代码是自上向下执行的，在主线程中立即执行的就是同步任务，比如简单的逻辑操作及函数，而异步任务不会立马立马执行，会挪步放到到异步队列中，比如ajax、promise、事件、计时器等等。

Event Loop是什么？中文翻译是事件循环，等待主线程中任务全部完成后，再回来把异步队列中任务放到主程序中运行，这样反复的循环，就是事件循环。

先来看组代码

    console.log('开始111');    setTimeout(function () {        console.log('setTimeout111');    }, 0);    Promise.resolve().then(function () {        console.log('promise111');    }).then(function () {        console.log('promise222');    });    console.log('开始222');

三、宏观任务和微观任务（先执行微观任务，再执行宏观任务）：

简单来说：

微观任务主要包括：Promise、MutaionObserver、process.nextTick(Node.js 环境)

那么我们知道了，Promise 属于微观任务， setTimeout、setInterval 属于宏观任务，先执行微观任务，等微观任务执行完，再执行宏观任务。所以我们再看一下这个代码：

    console.log('开始111');    setTimeout(function () {        console.log('setTimeout111');    }, 0);    Promise.resolve().then(function () {        console.log('promise111');    }).then(function () {        console.log('promise222');    });    console.log('开始222');

1、遇到同步任务，直接先打印 “开始111”。
2、遇到异步 setTimeout ，先放到队列中等待执行。
3、遇到了 Promise ，放到等待队列中。
4、遇到同步任务，直接打印 “开始222”。
5、同步执行完，返回执行队列中的代码，从上往下执行，发现有宏观任务 setTimeout 和微观任务 Promise ，那么先执行微观任务，再执行宏观任务。

同理，我们再来分析一个代码：

console.log('开始111');setTimeout(function () {   console.log('timeout111');});new Promise(resolve => {   console.log('promise111');   resolve();   setTimeout(() => console.log('timeout222'));}).then(function () {   console.log('promise222')})console.log('开始222');

分析一下：

所以，打印的顺序为：开始111 、 promise111 、 开始222 、 promise222 、 timeout111 、 timeout222 .

先执行主任务，把异步任务放入循环队列当中，等待主任务执行完，再执行队列中的异步任务。异步任务先执行微观任务，再执行宏观任务。一直这样循环，反复执行，就是事件循环机制。

喜欢的老铁，加个关注！今后会分享更多的前端干货，欢迎点赞转发关注

来源丨web前端开发

https://www.cnblogs.com/tangjianqiang/p/13470363.html