100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > js 异步执行_js执行机制:同步与异步(宏任务与微任务)

js 异步执行_js执行机制:同步与异步(宏任务与微任务)

时间:2021-12-30 17:38:06

相关推荐

js 异步执行_js执行机制:同步与异步(宏任务与微任务)

关于JavaScript,我们需要了解js是一门单线程语言,一切js版的多线程都是用单线程模拟出来的!!而单线程则意味着,所有任务都需要进行排队,前一个任务结束,才会执行后一个任务,如果前一个任务耗时时间过长,后一个任务就不得不一直等着。为了解决上述所出现的问题,而又遵循js是单线程语言的原则,js语言开发者就想到提出将所有要执行的任务分为同步任务与异步任务同步任务:在主线程上排队执行的任务,只有前一个任务执行完毕,后一个任务才可以执行异步任务:不进入主线程,而进入任务队列的任务,只有任务队列通知主线程,某个异步任务可以执行了,该异步任务才会进入主线程进行执行。宏任务:包括script(整体代码)、setTimeout、setInterval、IO、ui交互事件、postMessage、MessageChannel、setImmediate(node.js环境)微任务:Promise.then、Object.oberse、MutaionObserver、process.nextTick(node.js环境)代码执行原则,先同步再异步,先宏任务,再微任务具体代码详解

首先引入script标签,属于宏任务,将此任务放入到宏任务的任务队列中,而微任务的任务队列为空,主线程此时也为空,则通知主线程宏任务的队列中有要执行的异步任务,放入到

主线程中进行执行。首先遇到同步任务console.log('1'),则输出1,接着遇到宏任务setTimeout,放到宏任务队列中,标记为setTimeout1,接着继续执行,遇到微任务

process.nextTick,放到微任务队列中,标记为process1,接着继续执行,new Promise,直接执行console.log('7'),.then()被分发到微任务队列中,标记为then1,

再接着继续执行,又遇到一个宏任务setTimeOut,被放到宏任务队列中,标记为setTimeout2。

执行到这里说明script这个宏任务全部执行结束,而宏任务队列中存在setTimeout1、setTimeout2,微任务队列中存在process1、then1,

又遵循当一个宏任务执行结束之后,再执行微任务队列中的所有任务,所以要接着执行微任务队列中的process1与then1这两个微任务,而任务队列遵循着先进先出的原则,

所以先执行微任务中的process1,再执行then1这个微任务,依次输出6,8

然后微任务队列中的所用任务都执行结束了,开始下一轮的执行宏任务,依次按照上面的执行原则与顺序进行执行,就形成了一个事件循环。

最终结果输出为:1 7 6 8 2 4 3 5 9 11 10 12

以上就是个人对于js执行机制的理解,如有地方理解有误,请多指教。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。