阅读 1886
JavaScript之彻底理解EventLoop

JavaScript之彻底理解EventLoop

小知识,大挑战!本文正在参与「程序员必备小知识」创作活动

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。

前言

Event Loop即事件循环,是浏览器或Node解决单线程运行时不会阻塞的一种机制。

在正式学习Event Loop之前,先需要解决几个问题:

  1. 什么是同步与异步?
  2. JavaScript是一门单线程语言,那如何实现异步?
  3. 同步任务和异步任务的执行顺序如何?
  4. 异步任务是否存在优先级?

同步与异步

计算机领域中的同步与异步和我们现实社会的同步和异步正好相反。现实中的同步,就是同时进行,突出的是"同",比如看足球比赛的时候吃着零食,两件事情同时发生;异步就是不同时。但计算机中与现实存在一定差异。

举个栗子

天气冷了,早上刚醒来想喝点热水暖暖身子,但这每天起早贪黑996,晚上回来太累躺下就睡,没开水啊,没法子,只好急急忙忙去烧水。

现在早上太冷了啊,不由得在被窝里面多躺了一会,收拾的时间紧紧巴巴,不能空等水开,于是我便趁此去洗漱,收拾自己。 洗漱完,水开了,喝到暖暖的热水,舒服啊!

舒服完,开启新的996之日,打工人出发!

烧水和洗漱是在同时间进行的,这就是计算机中的异步

计算机中的同步是连续性的动作,上一步未完成前,下一步会发生堵塞,直至上一步完成后,下一步才可以继续执行。例如:只有等水开,才能喝到暖暖的热水。

单线程却可以异步?

JavaScript的确是一门单线程语言,但是浏览器UI是多线程的,异步任务借助浏览器的线程和JavaScript的执行机制实现。 例如,setTimeout就借助浏览器定时器触发线程的计时功能来实现。

浏览器线程

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

同步与异步执行顺序

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

举个栗子

  • setTimeout(cb, 1000),当1000ms后,就将cb压入Event Queue。
  • ajax(请求条件, cb),当http请求发送成功后,cb压入Event Queue。

EventLoop执行流程

Event Loop执行的流程如下:

1.webp

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

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

常见异步任务

  • DOM事件
  • AJAX请求
  • 定时器setTimeoutsetlnterval
  • ES6Promise

异步任务的优先级

下面继续来看一个案例:

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定义部分为同步任务,回调部分为异步任务

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

2.webp

刚看到如此结果,我的第一感觉是,setTimeout函数1s触发太慢导致它加入Event Queue的时间晚于Promise.then

于是我修改了setTimeout的回调时间为0(浏览器最小触发时间为4ms),但结果仍为发生改变。

那么也就意味着,JavaScript的异步任务是存在优先级的。

宏任务和微任务

JavaScript除了广义上将任务划分为同步任务和异步任务,还对异步任务进行了更精细的划分。异步任务又进一步分为微任务和宏任务。

3.webp

  • history traversal任务(h5当中的历史操作)
  • process.nextTicknodejs中的一个异步操作)
  • MutationObserverh5里面增加的,用来监听DOM节点变化的)

宏任务和微任务分别有各自的任务队列Event Queue,即宏任务队列和微任务队列。

Event Loop执行过程

了解到宏任务与微任务过后,我们来学习宏任务与微任务的执行顺序。

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

更新一下Event Loop的执行顺序图:

4.webp

总结

在上面学习的基础上,重新分析当前案例:

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)
复制代码

分析过程见下图:

5.webp

面试题

文章的最后附赠几道经典面试题,可以测试一下自己对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');
复制代码

题目二

setTimeout(() => {
    console.log(1)
}, 0)

const P = new Promise((resolve, reject) => {
    console.log(2)
    setTimeout(() => {
        resolve()
        console.log(3)
    }, 0)
})

P.then(() => {
    console.log(4)
})
console.log(5)
复制代码

题目三

var p1 = new Promise(function(resolve, reject){
    resolve("2")
})

setTimeout(function(){
    console.log("1")
},10)

p1.then(function(value){
    console.log(value)
})

setTimeout(function(){
    console.log("3")
},0)
复制代码
文章分类
前端
文章标签