事件循环机制先执行宏任务还是微任务(事件循环(Event Loop))
单线程
JavaScript是一种单线程的编程语言,同一时间只能做一件事,所有任务都需要排队依次完成。
为什么JS不能有多个线程呢
答:作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准。 为了避免这种复杂性,因此JS只能是单线程。
事件循环机制(Event Loop)
含义:事件循环分为两种,分别是浏览器事件循环和node.js事件循环,JavaScript是一门单线程语言,指主线程只有一个。Event Loop事件循环,其实就是JS引擎管理事件执行的一个流程,具体由运行环境确定。目前JS的主要运行环境有两个,浏览器和Node.js。
事件循环机制告诉了我们JS代码的执行顺序,是指浏览器或Node的一种解决JS单线程运行时不会阻塞的一种机制。
浏览器的事件循环又分为同步任务和异步任务
1、同步任务与异步任务
同步任务
含义:在主线程上排队执行的任务,只有一个任务执行完毕,才能执行后一个任务
异步任务
含义:不进入主线程,而进入“任务队列(task queue)”的任务,只有“任务队列”通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。
分类:异步任务又分为宏任务和微任务。所有同步任务都在主线程上执行,形成一个函数调用栈(执行栈),而异步则先放到任务队列(task queue)里,任务队列又分为宏任务(macro-task)与微任务(micro-task)。
宏任务宏任务包括:script(整体代码)、setTimout、setInterval、setImmediate(node.js环境)、I/O、UI交互事件
微任务微任务包括:new promise().then(回调)、MutationObserver(html5新特新)、Object.observe(已废弃)、process.nextTick(node环境)
若同时存在promise和nextTick,则先执行nextTick
2、执行过程
所有同步任务都在主线程上执行,形成一个执行栈(调用栈); 主线程之外,还存在一个‘任务队列’(task queue),浏览器中的各种 Web API 为异步的代码提供了一个单独的运行空间,当异步的代码运行完毕以后,会将代码中的回调送入到 任务队列中(队列遵循先进先出得原则) 一旦主线程的栈中的所有同步任务执行完毕后,调用栈为空时系统就会将队列中的回调函数依次压入调用栈中执行,当调用栈为空时,仍然会不断循环检测任务队列中是否有代码需要执行;3、执行顺序
先执行同步代码, 遇到异步宏任务则将异步宏任务放入宏任务队列中, 遇到异步微任务则将异步微任务放入微任务队列中, 当所有同步代码执行完毕后,再将异步微任务从队列中调入主线程执行, 微任务执行完毕后再将异步宏任务从队列中调入主线程执行, 一直循环直至所有任务执行完毕。注意:当宏任务和微任务都处于 任务队列(Task Queue) 中时,微任务的优先级大于宏任务,即先将微任务执行完,再执行宏任务;
4、举例:
setTimeout(() => { console.log("4"); setTimeout(() => { console.log("8"); }, 0); new Promise((r) => { console.log("5");//构造函数是同步的 r(); }).then(() => { console.log("7");//then()是异步的,这里已经入队 }); console.log("6"); }, 0); new Promise((r) => { console.log("1");//构造函数是同步的 r(); }).then(() => { console.log("3");//then()是异步的,这里已经入队 }); console.log("2"); //输出顺序:1 2 3 4 5 6 7 8实例1
setTimeout(function(){ console.log(1); }); new Promise(function(resolve){ console.log(2); resolve(); }).then(function(){ console.log(3); }); console.log(4); //输出顺序:2 4 3 1解释:
遇到setTimout,异步宏任务,放入宏任务队列中; 遇到new Promise,Promise在实例化的过程中所执行的代码都是同步进行的,所以输出2; 而Promise.then中注册的回调才是异步执行的,将其放入微任务队列中 遇到同步任务console.log(‘4’);输出4;主线程中同步任务执行完 从微任务队列中取出任务到主线程中,输出3,微任务队列为空 从宏任务队列中取出任务到主线程中,输出1,宏任务队列为空,结束~实例2
setTimeout(()=>{ new Promise(resolve =>{ resolve(); }).then(()=>{ console.log(test); }); console.log(4); }); new Promise(resolve => { resolve(); console.log(1) }).then( () => { console.log(3); Promise.resolve().then(() => { console.log(before timeout); }).then(() => { Promise.resolve().then(() => { console.log(also before timeout) }) }) }) console.log(2); //输出:1 2 3 before timeout also before timeout 4 test解释:
遇到setTimeout,异步宏任务,将() => {console.log(4)}放入宏任务队列中; 遇到new Promise,Promise在实例化的过程中所执行的代码都是同步进行的,所以输出1; 而Promise.then中注册的回调才是异步执行的,将其放入微任务队列中 遇到同步任务console.log(2),输出2;主线程中同步任务执行完 从微任务队列中取出任务到主线程中,输出3,此微任务中又有微任务,Promise.resolve().then(微任务a).then(微任务b),将其依次放入微任务队列中; 从微任务队列中取出任务a到主线程中,输出 before timeout; 从微任务队列中取出任务b到主线程中,任务b又注册了一个微任务c,放入微任务队列中; 从微任务队列中取出任务c到主线程中,输出 also before timeout;微任务队列为空 从宏任务队列中取出任务到主线程,此任务中注册了一个微任务d,将其放入微任务队列中,接下来遇到输出4,宏任务队列为空 从微任务队列中取出任务d到主线程 ,输出test,微任务队列为空,结束创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!