EventLoop(event loop exception null)

🍀EventLoop JS是单线程的，也就是，同一时间只能做一件事情。所以一旦遇到大量任务或者耗时的任务时，比如加载高清图片，网页就会“假死”，无法响应用户的行为。为了防止这种阻塞，才有了同步和异步的概念。而EventLoop，即事件循环机制，就是我们经常使用异步的原理。 同步任务 非耗时的任务， ... ?EventLoop

推荐整理分享EventLoop(event loop exception null)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:event loop exception,event loop 详解,event loop原理简述,并通过伪代码举例,event loop shut down,event loop shut down,event loop 详解,浏览器eventloop,event loop原理简述,并通过伪代码举例,内容如对您有帮助，希望把文章链接给更多的朋友！

JS是单线程的，也就是，同一时间只能做一件事情。所以一旦遇到大量任务或者耗时的任务时，比如加载高清图片，网页就会“假死”，无法响应用户的行为。为了防止这种阻塞，才有了同步和异步的概念。而EventLoop，即事件循环机制，就是我们经常使用异步的原理。

同步任务非耗时的任务，指的是在主线程上排队执行的那些任务只有前一个任务执行完毕，才能执行后一个任务console.log('111')console.log('222')console.log('333')

上述就是简单的同步任务，会按照顺序输出111，222，333

异步任务耗时任务，异步任务由JS委托给宿主环境进行执行当异步任务执行完之后，会通知JS主线程执行异步任务的回调函数

比如说发一个网络请求，主程序需要等到接收到数据后再去做其他的事情。当异步完成后，可能程序正在做其他的事情，所以即使异步完成了也需要在一旁等待，等到程序空闲下来才有时间继续执行。

异步任务分为宏任务和微任务。

为了防止一个函数执行时间过长阻塞后面的代码：

会先将同步代码压入执行栈中，在主线程上依次执行；将异步代码推入任务队列，任务队列又分为宏任务队列和微任务队列；因为宏任务队列的执行时间较长，所以微任务队列要优先于宏任务队列。如果执行栈中的所有同步任务执行完毕，就会读取任务队列，将可运行的异步任务添加到执行栈中，开始执行。宏任务

每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）

浏览器为了能够使得JS内部宏任务与DOM任务能够有序的执行，会在一个宏任务执行结束后，在下一个宏任务执行开始前，对页面进行重新渲染。所以宏任务执行是在DOM渲染之后。

宏任务包括：

异步Ajax请求setTimeout、setIntervalpostMessage文件操作微任务

微任务就是在当前任务结束之后立即执行的任务。微任务在渲染之前执行，所以它的响应速度相比宏任务会更快，因为无需等渲染。

微任务包括：

Promise.then、.catch、.finallyprocess.nextTick

运行机制先执行主线程中的同步任务遇到异步宏任务，就将其放入宏任务队列中遇到异步微任务，就将其放入微任务队列中主线程任务执行完后，从微任务队列中取出任务到主线程中，直到微任务队列为空。在这个过程中，如果遇到微任务中又有微任务，会将其依次放入微任务队列中微任务执行完毕后，从宏任务队列中取出任务到主线程中。在一个宏任务的执行过程中，如果遇到微任务，就会将其放入到微任务队列中。每一个宏任务执行完之后，都会检查是否存在正在等待执行的微任务，如果有就会先将所有微任务执行完，再执行下一个宏任务。

根据上述的解释，先来判断一下这段代码的输出结果

setTimeout(function(){console.log('1')})new Promise(function(resolve){console.log('2')resolve()}).then(function(){console.log('3')})console.log('4')

正确的输出结果是：2431

执行的过程：

①先执行所有的同步任务(第5行、第10行)

②再执行微任务(第8行，promise.then是微任务)

③在执行下一个宏任务(第2行，setTimeout是宏任务)

再看一个复杂的例子

console.log('1');setTimeout(() => {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(() => {console.log('7')new Promise(function(resolve) {console.log('8')resolve()}).then(function() {console.log('9')})})

输出的结果为：156234789

需要注意的点就是执行完每个宏任务，都会把微任务队列中的执行完，才能再执行下一个宏任务