javascript事件循环机制及面试题详解

码途聆云者
• 阅读 1409

javascript是单线程执行的程序,也就是它只有一条主线,所有的程序都是逐行“排队”执行,在这种情况下可能存在一些问题,比如说setTimeout、ajax等待执行的时间较长,就会阻塞后续代码的执行,使得整个程序执行的耗时非常久,那么为了应对这样一个问题,javascript代码在执行的时候,是有几个“通道”的。

首先是调用栈,执行耗时较短的操作,耗时较长的操作先放置到任务队列中,任务队列又分为宏任务(macro-task)和微任务(micro-task),微任务中队列中放置的是 promise.then、aysnc、await 这样操作,宏任务队列中放置的是 setTimeout、ajax、onClick事件,等调用栈的任务执行完成再轮询微任务队列,微任务队列中任务执行完成之后再执行宏任务。

这里提到了栈和队列,简单说一下这两种数据结构,栈是一种后进先出的结构,只能从尾部进入,从尾部删除,拿生活中的场景来打比方,就好像自助餐的餐盘,最先放的盘子在最底下,最后放的盘子在最上面,需要把最上面的盘子一个个拿走,才能拿到最下面的盘子。

而队列,是一种先进先出的结构,从尾部进入,从头部删除,就像我们去排队买东西,先去的同学可以先买到。

javascript事件循环机制及面试题详解

再回到事件循环机制(event loop),不阻塞主进程的程序放入调用栈中,压入栈底,执行完了就会弹出,如果是函数,那么执行完函数里所有的内容才会弹出,而阻塞主进程的程序放入任务队列中,他们需要“排队”依次执行。

首先来个简单的例子,判断以下程序的执行顺序

new Promise(resolve => {
  console.log('promise');
  resolve(5);
}).then(value=>{
  console.log('then回调', value)
})

function func1() {
  console.log('func1');
}

setTimeout(() => {
  console.log('setTimeout');
});

func1();

创建一个promise的实例就是开启了一个异步任务,传入的回调函数,也叫做excutor 函数,会立刻执行,所以输入promise,使用resolve返回一个成功的执行结果,then函数里的执行会推入到微任务队列中等待调用栈执行完成才依次执行。

向下执行发现定义了一个func1的函数,函数此时没有被调用,则不会推入调用栈中执行。程序继续往下,发现调用setTimeout函数,将打印的setTimeout推入宏任务队列,再往下执行调用函数func1,将func1推入调用栈中,执行func1函数,此时输出fun1。

调用栈里所有的内容都执行完成,开始轮询微任务队列,输入then回调5,最后执行宏任务队列,输入setTimeout

javascript事件循环机制及面试题详解

 再来看一个复杂的例子

setTimeout(function () {
  console.log("set1");
  new Promise(function (resolve) {
    resolve();
  }).then(function () {
    new Promise(function (resolve) {
      resolve();
    }).then(function () {
      console.log("then4");
    });
    console.log("then2");
  });
});

new Promise(function (resolve) {
  console.log("pr1");
  resolve();
}).then(function () {
  console.log("then1");
});

setTimeout(function () {
  console.log("set2");
});

console.log(2);

queueMicrotask(() => {
  console.log("queueMicrotask1")
});

new Promise(function (resolve) {
  resolve();
}).then(function () {
  console.log("then3");
});

setTimeout执行的回调函数("set1")直接被放置到宏任务队列中等待,Promise的excutor函数立刻执行,首先输入 pr1,Promise.then函数("then1")放入微任务队列中等待,下面的setTimeout执行的回调函数("set2")也被放置到宏任务队列中,排在("set1")后面,接下来调用栈中输出2,queueMicrotask表示开启一个微任务,与Promise.then函数效果一致,("queueMicrotask1")放入微任务队列中,再往下执行,new Promise的excutor函数立刻执行,then函数("then3")放到微任务队列中等待,此时调用栈出已依次输入pr1,2。

调用栈中程序已执行完,来到微任务队列中执行微任务,依次输出then1,queueMicrotask1,then3。

此时微任务队列中的任务也执行完成,来到宏任务队列中,输出set1,执行Promise的excutor函数,resolve即返回成功的执行结果,then函数("then2")放入微任务中,一旦微任务队列中有任务,就不会往后执行宏任务,所以宏任务队列中的另一个setTimeout函数("set2")此时不会执行,来到微任务队列中执行("then2"),输出then2,再执行一个promise函数,("then4")被放入到微任务队列中,输出then4。

微任务队列也都执行完成,此时来到宏任务队列中,执行set2。

所以最后的输出结果为:

pr1
2
then1
queueMicrotask1
then3
set1
then2
then4
set2

简单图示如下

javascript事件循环机制及面试题详解

最后一道题,加上了 async、await

先来一个结论,通过async定义的函数在调用栈中执行,await 将异步程序变成同步,所以await后面执行的程序需要等到await定义的函数执行完成才执行,需要在微任务队列中等待

async function async1 () {
  console.log('async1 start')
  await async2();
  console.log('async1 end')
}

async function async2 () {
  console.log('async2')
}

console.log('script start')

setTimeout(function () {
  console.log('setTimeout')
}, 0)

async1();

new Promise (function (resolve) {
  console.log('promise1')
  resolve();
}).then (function () {
  console.log('promise2')
})

console.log('script end')

函数只有调用的时候才会推入调用栈中,所以最先执行的是 console.log,即输出 script start,然后setTimeout函数("setTimeout")放入宏任务队列中等待,调用async1函数,输出 async1 start,执行async2函数,输出async2,("async1 end")放入微任务队列中等待,继续向下执行Promise函数,输出 promise1,then函数中的("promise2")放入微任务队列中等待,输出 script end。

调用栈的程序都已执行完毕,此时开始执行微任务队列中的程序,依次输出 async1 end、promise2。

微任务队列中的程序也已执行完成,开始执行宏任务中的程序,输出setTimeout。

输出顺序为

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

简单图示如下

javascript事件循环机制及面试题详解

判断执行顺序可以记住以下几个重点

1、promise中的回调函数立刻执行,then中的回调函数会推入微任务队列中,等待调用栈所有任务执行完才执行

2、async函数里的内容是放入调用栈执行的,await的下一行内容是放入微任务执行的

3、调用栈执行完成后,会不断的轮询微任务队列,即使先将宏任务推入队列,也会先执行微任务

点赞
收藏
评论区
推荐文章
皮卡皮卡皮 皮卡皮卡皮
4年前
ajax
ajax定义:异步的JavaScript和XML是一种综合技术:运用了XMLHTTPRequest(xhr)和服务器交换数据,通过JavaScript局部渲染页面,从而实现异步的局部更新同步与异步同步代码按顺序执行,会阻塞代码执行(alert)异步不会阻塞代码XMLHTTPRequestxhrjsvarxhrnew
Karen110 Karen110
4年前
一篇文章带你了解JavaScript时间
一、前言setTimeout(function,milliseconds)在等待指定的毫秒数后执行函数。setInterval(function,milliseconds)setTimeout()相同,但会重复执行。二、时间事件窗口对象允许在指定的时间间隔执行代码。时间间隔称为定时事件。1\.setTimeout()方法window.set
菜园前端 菜园前端
2年前
什么是 JavaScript 单线程?
原文链接:什么是JavaScript单线程?单线程是指当存在多个任务时候,所有任务都必须排队并且按照顺序执行。这里就会有同学问为什么不是多线程?假设是多线程,同时执行一些任务,某个任务进行了该dom的修改,而某个任务进行了该dom的删除,这样就会出现一些问
徐小夕 徐小夕
5年前
web性能优化的15条实用技巧
javascript在浏览器中运行的性能,可以认为是开发者所面临的最严重的可用性问题。这个问题因为javascript的阻塞性而变得复杂,事实上,多数浏览器使用单一进程来处理用户界面和js脚本执行,所以同一时刻只能做一件事。js执行过程耗时越久,浏览器等待响应的时间越长。加载和执行1.提高加载性能1.IE8,FF,3.5,Safari4和
Stella981 Stella981
4年前
Javascript解析机制 执行机制
HTML5学堂:在学习JavaScript过程中,我们需要了解事件的机制是怎么执行的?本文将会提到JavaScript事件机制的解析,希望对大家有帮助!javascript解析的过程主要分为两个阶段,分别是编译与执行阶段。在编译期,javascript解释器将完成对javascript代码的预处理,即将javascript代码转换为字节码。在执行
Stella981 Stella981
4年前
JavaScript:再谈Tasks和Microtasks
JavaScript是单线程,也就是说JS的堆栈中只允许有一类任务在执行,不可以同时执行多类任务。在读js文件时,所有的同步任务是一条task,当然了,每一条task都是一个队列,按顺序执行。而如果在中途遇到了setTimeout这种异步任务,就会将它挂起,放到任务队列中去执行,等执行完毕后,如果有callback,就把callback推入到Tasks中去,
Stella981 Stella981
4年前
AJAX与Django
AJAX什么是AJAX?AJAX不是JavaScript的规范,它的缩写:AsynchronousJavaScriptandXML,意思就是用JavaScript执行异步网络请求。提交任务之后,不原地等待,直接执行下一行代码,任务的返回通过回调机制。局部刷新,不整体刷新,而是界面莫个地方局部刷新AJAX原理
Stella981 Stella981
4年前
JavaScript 事件循环机制
javascript是一门单线程的非阻塞的脚本语言。单线程意味着javascript在执行代码的任何时候,都只有一个主线程来处理所有的任务。那么javascript引擎是如何实现这一点的呢?因为事件循环(eventloop)。先上图:!event_loop(https://oscimg.oschina.net/oscnet/up6
Wesley13 Wesley13
4年前
JS定时器使用,定时定点,固定时刻,循环执行
本文概述:本文主要介绍通过JS实现定时定点执行,在某一个固定时刻执行某个函数的方法。比如说在下一个整点执行,在每一个整点执行,每隔10分钟定时执行的方法。JavaScript中有两个定时器方法:setTimeout()和setInterval()。这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。实际上,setTimeout和s
Wesley13 Wesley13
4年前
JS篇(004)
答案:1.脚本语言。JavaScript是一种解释型的脚本语言,C、C等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。2.基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。3.简单。JavaScript语言中采用的是弱类型的变量
js基础之setTimeout与setInterval原理分析
setTimeout与setInterval概述setTimeout与setInterval是JavaScript引擎提供的两个定时器方法,分别用于函数的延时执行和循环调用。前者的主要思想是通过一个定时器,让函数在计时结束后再执行;后者则是每隔一定的时间,
码途聆云者
码途聆云者
Lv1
黑发不知勤学早,白首方悔读书迟。
文章
2
粉丝
0
获赞
0