浏览器环境下js引擎的事件循环机制

438 阅读3分钟

执行栈与事件队列

当我们调用一个方法的时候,js会生成一个与这个方法对应的执行环境,又叫执行上下文。这个执行环境中存在着这个方法的私有作用域、上层作用域的指向、方法的参数、这个作用域中定义的变量以及这个作用域的this对象。 而当一系列方法被依次调用的时候,因为js是单线程的,同一时间只能执行一个方法,于是这些方法被排队在一个单独的地方。这个地方被称为执行栈执行栈: 存储了要执行的函数的队列;

当一个脚本第一次执行的时候,js引擎会解析这段代码,并将其中的同步代码按照执行顺序加入执行栈中,然后从头开始执行。如果当前执行的是一个方法,那么js会向执行栈中添加这个方法的执行环境,然后进入这个执行环境继续执行其中的代码。当这个执行环境中的代码 执行完毕并返回结果后,js会退出这个执行环境并把这个执行环境销毁,回到上一个方法的执行环境。。这个过程反复进行,直到执行栈中的代码全部执行完毕。

js引擎遇到一个异步事件后并不会一直等待其返回结果,而是会将这个事件挂起,继续执行执行栈中的其他任务。当一个异步事件返回结果后,js会将这个事件加入与当前执行栈不同的另一个队列,我们称之为事件队列。被放入事件队列不会立刻执行其回调,而是等待当前执行栈中的所有任务都执行完毕, 主线程处于闲置状态时,主线程会去查找事件队列是否有任务。如果有,那么主线程会从中取出排在第一位的事件,并把这个事件对应的回调放入执行栈中,然后执行其中的同步代码...,如此反复,这样就形成了一个无限的循环。这就是这个过程被称为“事件循环(Event Loop)”的原因。

当执行栈中的同步任务执行完成,主线程会从事件队列中取出排名第一的事件,并把这个事件的对应的回调函数放入执行栈中,让这个回调同步执行;当这个回调执行完,主线程空闲会继续向事件队列中排名第一的事件,这样依次循环执行--> 这种循环执行就是事件循环

微任务 宏任务

当主栈执行完成,会首先去微任务队列中执行所有的微任务,执行完微任务队列之后,再去宏任务队列中去取事件的回调,依次执行;

setTimeout(function () {
	//setTimeout()本身是同步的,setTimeout中的function函数是异步的;会被放进事件队列中
},2000);
for(let i=0;i<10000000;i++){

}