事件循环（Event Loop）相关概念及面试题

小伙伴们，看面试题前，先来看几个概念吧！！！

宏任务

(macro)task，可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）。

任务（代码）	宏任务	环境
script	宏任务	浏览器
事件	宏任务	浏览器
网络请求（Ajax）	宏任务	浏览器
setTimeout() 定时器	宏任务	浏览器 / Node
fs.readFile() 读取文件	宏任务	Node

比如去银行排队办业务，每个人的业务就相当于是一个宏任务；

微任务

微任务（microtask）是宏任务中的一个部分，它的执行时机是在同步代码执行之后，下一个宏任务执行之前。

微任务包含：

Promise.then
process.nextTick(Node.js 环境)

比如一个人，去银行存钱，存钱之后，又进行了一些了操作，比如买纪念币、买理财产品、办信用卡，这些就叫做微任务。

运行机制

在事件循环中，每进行一次循环操作称为 tick，每一次 tick 的任务处理模型是比较复杂的，但关键步骤如下：

执行一个宏任务（执行栈中没有就从事件队列中获取）
执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
宏任务里的同步代码执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

下面开整面试题喽

第 1 题：

第 2 题：

第3 题：

第4 题：

console.log(1)setTimeout(function() {console.log(2)
}, 0)const p = new Promise((resolve, reject) => {resolve(1000)
})
p.then(data => {console.log(data)
})console.log(3)答案：1，3，1000，2

第5 题：

console.log(1)
setTimeout(function() {console.log(2)new Promise(function(resolve) {console.log(3)resolve()}).then(function() {console.log(4)})
})new Promise(function(resolve) {console.log(5)resolve()
}).then(function() {console.log(6)
})
setTimeout(function() {console.log(7)new Promise(function(resolve) {console.log(8)resolve()}).then(function() {console.log(9)})
})
console.log(10)答案：1，5，10，6，2，3，4，7，8，9

第6 题：

 console.log(1)setTimeout(function() {console.log(2)}, 0)const p = new Promise((resolve, reject) => {console.log(3)resolve(1000) // 标记为成功console.log(4)})p.then(data => {console.log(data)})console.log(5)答案：1/3/4/5/1000/2

第7 题：

new Promise((resolve, reject) => {resolve(1)new Promise((resolve, reject) => {resolve(2)}).then(data => {console.log(data)})}).then(data => {console.log(data)})console.log(3)答案：3，2，1

第8 题：

setTimeout(() => {console.log(1)
}, 0)
new Promise((resolve, reject) => {console.log(2)resolve('p1')new Promise((resolve, reject) => {console.log(3)setTimeout(() => {resolve('setTimeout2')console.log(4)}, 0)resolve('p2')}).then(data => {console.log(data)})setTimeout(() => {resolve('setTimeout1')console.log(5)}, 0)
}).then(data => {console.log(data)
})
console.log(6)答案：2,3,6,p2,p1,1,4,5

第9 题：

<script>console.log(1);async function fnOne() {console.log(2);await fnTwo(); // 右结合先执行右侧的代码, 然后等待console.log(3);}async function fnTwo() {console.log(4);}fnOne();setTimeout(() => {console.log(5);}, 2000);let p = new Promise((resolve, reject) => { // new Promise()里的函数体会马上执行所有代码console.log(6);resolve();console.log(7);})setTimeout(() => {console.log(8)}, 0)p.then(() => {console.log(9);})console.log(10);</script><script>console.log(11);setTimeout(() => {console.log(12);let p = new Promise((resolve) => {resolve(13);})p.then(res => {console.log(res);})console.log(15);}, 0)console.log(14);</script>

最后一题稍后解密哈，大家先做做！！！

事件循环（Event Loop）相关概念及面试题相关推荐

技术干货 | JavaScript 之事件循环(Event Loop)
导读:学过 JavaScript(下文简称 JS) 的都知道它是一门单线程的.非阻塞的脚本语言.单线程意味着,JS 代码在执行的任何时候,都只有一个主线程来处理所有的任务,这也就意味着 JS 无法进行 ...
python事件循环_简单了解一下事件循环(Event Loop)
关于我一个有思想的程序猿,终身学习实践者,目前在一个创业团队任team lead,技术栈涉及Android.Python.Java和Go,这个也是我们团队的主要技术栈. Github:https:/ ...
php event loop,理解javascript中的事件循环(Event Loop)
背景在研究js的异步的实现方式的时候,发现了JavaScript 中的 macrotask 和 microtask 的概念.在查阅了一番资料之后,对其中的执行机制有所了解,下面整理出来,希望可以帮助 ...
JavaScript 异步执行的学习笔记 - 什么是事件循环 Event loop？
原文使用像 JavaScript 这样的语言进行编程时,最重要但也经常被误解的部分之一是如何表达和操作一段需要某段时间才能完成执行的程序行为. 这不仅仅是从 for 循环开始到 for 循环结束发生 ...
JAVA script 循环图片_深入分析JavaScript 事件循环(Event Loop)
事件循环(Event Loop),是每个JS开发者都会接触到的概念,但是刚接触时可能会存在各种疑惑. 众所周知,JS是单线程的,即同一时间只能运行一个任务.一般情况下这不会引发问题,但是如果我们有一个 ...
面试率 90% 的JS事件循环Event Loop，看这篇就够了！! !
面试率 90% 的JS事件循环Event Loop,看这篇就够了!! ! 事件循环(Event Loop)大家应该并不陌生,它是前端极其重要的基础知识.在平时的讨论或者面试中也是一个非常高频的话题. ...
JavaScript基础：浅聊事件循环(Event LooP)以及微任务，宏任务，DOM渲染
一直说JavaScript是单线程的执行的(当然也可以通过其它其它的方式异步,本篇暂时不聊). 内核的组成首先聊一下浏览器的内核组成部分,当然下面也不是全部,而只是说一些常见的. 主线线程 js引擎 ...
JavaScipt 中的事件循环(event loop)，以及微任务和宏任务的概念
说事件循环(event loop)之前先要搞清楚几个问题. 1. js为什么是单线程的? 试想一下,如果js不是单线程的,同时有两个方法作用dom,一个删除,一个修改,那么这时候浏览器该听谁的? 2. ...
ajax是宏任务还是微任务,(滴滴面试)事件循环Event Loop及微任务和宏任务的执行过程详解...
之前一直在面试,对于一些大厂面试题真的还是很注重原理和基础的, 还有就是数据结构和算法这种,校招的话,这些是很重要的, 前天和滴滴的人面试,问的真心觉得不难,而且也都是现在面试前端很常见的问题, 对于 ...
javascript事件循环Event Loop，宏任务与微任务
1.javascript的运行机制介绍 javascript是单线程的语言,默认情况下一个时间点只能做一件事情,因此引入异步模型javascript是一门解释性脚本语言,即(边解释边运行) 2.阻塞式 ...

事件循环（Event Loop）相关概念及面试题

宏任务

微任务

运行机制

事件循环（Event Loop）相关概念及面试题相关推荐

最新文章

热门文章

事件循环（Event Loop）相关概念 及 面试题

宏任务

微任务

运行机制

事件循环（Event Loop）相关概念 及 面试题相关推荐

最新文章

热门文章

事件循环（Event Loop）相关概念及面试题

事件循环（Event Loop）相关概念及面试题相关推荐