关于Event Loop

从Event Loop谈JS的运行机制

首先需要记住几个概念,首先每个tab进程包括以下几个线程:
JS引擎线程+事件触发线程+定时器线程

以及以下几点:

  1. JS分为同步任务和异步任务
  2. 同步任务都在主线程上执行,形成一个执行栈
  3. 主线程之外,事件触发线程管理着一个任务队列,只要异步任务有了运行结果,就在任务队列之中放置一个事件。
  4. 一旦执行栈中的所有同步任务执行完毕(此时JS引擎空闲),系统就会读取任务队列,将可运行的异步任务添加到可执行栈中,开始执行。

这里注意:不止ajax、setTimeOut等属于异步,绑定的点击事件等也属于异步事件。当触发时会将时间放入任务队列中,主执行栈空了后才会执行。

而setTimeout和setInterval则是由专门的定时器线程管理,时间一到,会将事件放入任务队列中。

用setTimeout模拟定期计时和直接用setInterval是有区别的。

因为每次setTimeout计时到后就会去执行,然后执行一段时间后才会继续setTimeout,中间就多了误差
(误差多少与代码执行时间有关)

而setInterval则是每次都精确的隔一段时间推入一个事件
(但是,事件的实际执行时间不一定就准确,还有可能是这个事件还没执行完毕,下一个事件就来了)

而且setInterval有一些比较致命的问题就是:

累计效应(上面提到的),如果setInterval代码在(setInterval)再次添加到队列之前还没有完成执行,就会导致定时器代码连续运行好几次,而之间没有间隔。
就算正常间隔执行,多个setInterval的代码执行时间可能会比预期小(因为代码执行需要一定时间)

所以,用setTimeout模拟定时的效果可能比setInterval更能满足需求。

关于宏任务和微任务:

宏任务,可以理解是每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行)

每一个task会从头到尾将这个任务执行完毕,不会执行其它

浏览器为了能够使得JS内部task与DOM任务能够有序的执行,会在一个task执行结束后,在下一个 task 执行开始前,对页面进行重新渲染
task->渲染->task->...

微任务:可以理解是在当前 task 执行结束后立即执行的任务

也就是说,在当前task任务后,下一个task之前,在渲染之前
所以它的响应速度相比setTimeout(setTimeout是宏任务)会更快,因为无需等渲染
也就是说,在某一个宏任务执行完后,就会将在它执行期间产生的所有微任务都执行完毕(在渲染前)

宏任务:主代码块,setTimeout,setInterval等(可以看到,事件队列中的每一个事件都是一个宏任务)
微任务:Promise,process.nextTick等

猜测理解:
macrotask中的事件都是放在一个事件队列中的,而这个队列由事件触发线程维护
microtask中的所有微任务都是添加到微任务队列(Job Queues)中,等待当前macrotask执行完毕后执行,而这个队列由JS引擎线程维护

所以,总结下运行机制:

  1. 执行一个宏任务(栈中没有就从事件队列中获取)
  2. 执行过程中如果遇到微任务,就将它添加到微任务的任务队列中
  3. 宏任务执行完毕后,立即执行当前微任务队列中的所有微任务(依次执行)
  4. 当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染
  5. 渲染完毕后,JS线程继续接管,开始下一个宏任务(从事件队列中获取)
关于浏览器中的进程和线程 
下一篇:关于浏览器中的进程和线程


如果我的文章对你有帮助,或许可以打赏一下呀!

支付宝
微信
QQ