2024年最全JavaScript之彻底学会Event Loop，前端开发一般需要学会什么

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

4. 只要主线程空了，就会去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执行过程

---

1. 代码开始执行，创建一个全局调用栈，script作为宏任务执行

2. 执行过程过同步任务立即执行，异步任务根据异步任务类型分别注册到微任务队列和宏任务队列

3. 同步任务执行完毕，查看微任务队列

• 若存在微任务，将微任务队列全部执行(包括执行微任务过程中产生的新微任务)

• 若无微任务，查看宏任务队列，执行第一个宏任务，宏任务执行完毕，查看微任务队列，重复上述操作，直至宏任务队列为空

总结

---

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

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()

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-Eqq135pa-1715038799791)]