讲事件循环和任务队列,肯定就要先说一下JavaScript的单线程
因为JavaScript(最初)是运行在浏览器中的,作为一个与用户交互为主的语言,如果设计为多线程,会带来很复杂的同步问题,比如两个事件,一个给变量a*2,一个给变量a+10,如果存在多线程,执行顺序不同,结果不同,同样的情况应用于DOM操作呢,所以为了避免这种复杂性,JavaScript设计为单线程。
单线程带来的新问题就是程序中有很多操作会很耗时,比如Ajax请求,而为了这种操作不阻塞程序的运行,所以有了任务队列。用途就是浏览器发起一个Ajax请求,而从发起请求到收到响应是需要一段时间的,这时主线程会把这个任务挂起,执行接下来的任务,以保证程序不被阻塞,待到收到请求的响应,再把对应的回调方法添加到一个队列中去依次执行。简单理解这个队列就是任务队列。
接下来上图:
解释下上图:
浏览器的中的任务分为宏任务和微任务,所以任务队列也分为宏任务队列和微任务队列。
宏任务队列中根据事件源又分为如图所示任务队列(新添加一个宏任务的时候,如果宏任务队列中有该事件源的队列,则添加到该队列,否则创建该事件源的队列,把该宏任务插入队列,并把该队列插入宏任务队列),因为主线程每次会执行微任务队列中的所有微任务,所以微任务中不会根据事件源划分微任务队列,主线程中所有同步任务执行完毕后,会执行微任务队列中所有的微任务,然后执行一个宏任务队列,再次执行微任务队列中的所有微任务,再执行下一个宏任务队列,如此循环,这个过程就是事件循环(Event Loop)。
如果有错误或者不严谨的地方,请给予指正,十分感谢!