JavaScript|JavaScript之彻底学会Event Loop JavaScript|javascript

前言

学习JavaScript执行机制能更好的理解JavaScript的代码执行顺序，进而更好的理解JavaScript的异步模式。

Event Loop即事件循环，是浏览器或Node解决单线程运行时不会阻塞的一种机制。(也可以理解为经常使用的异步)
在正式学习Event Loop之前，先提出几个问题：

什么是同步与异步？
JavaScript是一门单线程语言，那如何实现异步？
同步任务和异步任务的执行顺序如何？
异步任务是否存在优先级？

同步与异步
计算机领域中的同步与异步和我们现实社会的同步和异步正好相反。现实中的同步，就是同时进行，突出的是"同"，比如看足球比赛的时候吃着零食，两件事情同时发生；异步就是不同时。但计算机中与之存在一定差异。
举个例子：
早上刚醒来想喝点热水暖暖身子，因此就要去烧水，由于早上的时间很宝贵，不能空等水开，这时候一般会去洗漱，打扮自己。
洗漱完，水开了，喝到热水，暖身成功，打工人出发！
烧水和洗漱是在同时间进行的，这就是计算机中的异步。计算机中的同步是连续性的动作，上一步未完成前，下一步会发生堵塞，直至上一步完成后，下一步才可以执行。例如：只有等水开，才能喝到暖暖的热水。
单线程却可以异步？ JavaScript的确是一门单线程语言，但是浏览器UI是多线程的，异步任务借助浏览器的线程和JavaScript的执行机制实现。
例如，setTimeout就借助浏览器定时器触发线程的计时功能来实现。
浏览器线程

GUI渲染线程
- 绘制页面，解析HTML、CSS，构建DOM树等
- 页面的重绘和重排
- 与JS引擎互斥(JS引擎阻塞页面刷新)
JS引擎线程
- js脚本代码执行
- 负责执行准备好的事件，例如定时器计时结束或异步请求成功且正确返回
- 与GUI渲染线程互斥
事件触发线程
- 当对应的事件满足触发条件，将事件添加到js的任务队列末尾
- 多个事件加入任务队列需要排队等待
定时器触发线程
- 负责执行异步的定时器类事件：setTimeout、setInterval等
- 浏览器定时计时由该线程完成，计时完毕后将事件添加至任务队列队尾
HTTP请求线程
- 负责异步请求
- 当监听到异步请求状态变更时，如果存在回调函数，该线程会将回调函数加入到任务队列队尾

关于JavaScript的执行顺序，就要进入本文的核心：Event Loop。
同步与异步执行顺序

JavaScript将任务分为同步任务和异步任务，同步任务进入主线中中，异步任务首先到Event Table进行回调函数注册。
当异步任务的触发条件满足，将回调函数从Event Table压入Event Queue中。
主线程里面的同步任务执行完毕，系统会去Event Queue中读取异步的回调函数。
只要主线程空了，就会去Event Queue读取回调函数，这个过程被称为Event Loop。

触发条件满足: 举个栗子，setTimeout(cb, 1000)，当1000ms后，就讲cb压入Event Queue。

再举个栗子，ajax(请求条件, cb)，当http请求发送成功后，cb压入Event Queue。

Event Loop执行的流程如下：

文章图片

下面一起来看一个例子，熟悉一下上述流程。

// 下面代码的打印结果？ // 同步任务打印 first console.log("first"); setTimeout(() => {// 异步任务压入Event Table 4ms之后 cb压入Event Queue console.log("second"); },0) // 同步任务打印last console.log("last"); // 读取Event Queue 打印second

有哪些异步任务会进入 Event Queue呢？

DOM事件
AJAX请求
定时器setTimeout和setlnterval
ES6的Promise

异步任务的优先级下面继续来看一个案例：

setTimeout(() => {console.log(1); }, 1000) new Promise(function(resolve){console.log(2); for(var i = 0; i < 10000; i++){i == 99 && resolve(); } }).then(function(){console.log(3) }); console.log(4)

按照上面的学习：
可以很轻松得出案例的打印结果：2，4，1，3。

Promise定义部分为同步任务，回调部分为异步任务

将案例代码在控制台运行，最终返回结果却有些出人意料：

文章图片

刚看到如此结果，我的第一感觉是，setTimeout函数1s触发太慢导致它加入Event Queue的顺序晚于Promise.then
于是我修改了setTimeout的回调时间为0(浏览器最小触发时间为4ms)，但结果仍为发生改变。
那么也就意味着，JavaScript的异步任务是存在优先级的。
宏任务和微任务 JavaScript除了广义上将任务划分为同步任务和异步任务，还对异步任务进行了更精细的划分。

文章图片

history traversal任务（h5当中的历史操作）

process.nextTick（nodejs中的一个异步操作）

MutationObserver（h5里面增加的，用来监听DOM节点变化的）

不同的任务会进入对应的Event Queue。
更新一下Event Loop的执行顺序图：

文章图片

Event Loop执行过程

代码开始执行，创建一个全局调用栈，script作为宏任务执行
执行过程过同步任务立即执行，异步任务根据异步任务类型分别注册到微任务队列和宏任务队列
同步任务执行完毕，查看微任务队列
- 若存在微任务，将微任务队列全部执行(包括执行微任务过程中产生的新微任务)
- 若无微任务，查看宏任务队列，执行第一个宏任务，宏任务执行完毕，查看微任务队列，重复上述操作，直至宏任务队列为空

总结在上面学习的基础上，重新分析当前案例：

setTimeout(() => {console.log(1); }, 1000) new Promise(function(resolve){console.log(2); for(var i = 0; i < 10000; i++){i == 99 && resolve(); } }).then(function(){console.log(3) }); console.log(4)

分析过程见下图：

文章图片

附赠 【JavaScript|JavaScript之彻底学会Event Loop】文章的最后附赠经典烂大街面试题，可以测试一下自己的掌握程度。

console.log('script start'); setTimeout(() => {console.log('time1'); }, 1 * 2000); Promise.resolve() .then(function() {console.log('promise1'); }).then(function() {console.log('promise2'); }); async function foo() {await bar() console.log('async1 end') } foo()async function errorFunc () {try {await Promise.reject('error!!!') } catch(e) {console.log(e) } console.log('async1'); return Promise.resolve('async1 success') } errorFunc().then(res => console.log(res))function bar() {console.log('async2 end') }console.log('script end');