JavaScript之彻底学会Event Loop
Posted 战场小包
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript之彻底学会Event Loop相关的知识,希望对你有一定的参考价值。
前言
学习
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)
分析过程见下图:
附赠
文章的最后附赠经典烂大街面试题,可以测试一下自己的掌握程度。
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');
以上是关于JavaScript之彻底学会Event Loop的主要内容,如果未能解决你的问题,请参考以下文章
彻底弄懂 JavaScript 执行机制(Event Loop)
JavaScript:彻底理解同步异步和事件循环(Event Loop)