js事件循环机制

629 阅读2分钟

一、浏览器内核介绍

浏览器内核即渲染进程 ( 注意跟渲染线程区分开 ) ,内部是多线程的,主要包括js引擎线程、GUI渲染引擎线程、事件触发线程、定时触发器线程、异步http请求线程等。浏览器一般每个tab页都会有一个渲染进程,互不影响。

为什么说js是单线程的?

因为每一个渲染进程中,无论何时都只有一个js引擎线程在执行js程序。js引擎的执行和GUI渲染线程的执行是互斥的,会互相阻塞,因此js只能是单线程的。

二、JS两种任务介绍

js分为同步任务异步任务,同步任务都在主线程(即js引擎线程)中执行,会形成一个执行栈,执行过程中,如果遇到定时器或http请求这种异步任务,就会分别将任务移交给定时触发器线程异步http请求线程去处理,异步任务有结果后,就会在事件队列尾部添加一个回调事件。其中,异步任务又分为宏任务微任务,宏任务可以理解为每次执行栈中的代码(setTimeout和setInterval等),微任务是宏任务执行后立即执行的任务(promise,await等)。

"事件触发线程" 会管理一个事件队列,用来控制事件循环。

"定时触发器线程" 会跟据任务设置时间触发计时,时间到了会把回调事件交给事件触发线程,事件触发线程将回调事件放到事件队列尾部排队。

"异步http请求线程" 会在请求状态变更时,如果有对应回调事件,就把回调事件交给事件触发线程,事件触发线程将回调事件放到事件队列尾部排队。

三、事件循环机制介绍

首先,整体的script会作为第一个宏任务开始执行,当执行栈中的同步任务执行完后,js引擎就会空闲下来,对事件队列发起询问,先读取微任务队列,如果微任务队列中有回调事件,则把回调事件放到执行栈中,执行完毕后,触发一次GUI渲染线程,对页面进行渲染。后读取宏任务队列中的一个任务,循环宏任务-微任务-GUI渲染-宏任务-微任务-GUI渲染...的过程,这就是Event Loop事件循环机制的过程。

参考资料

mp.weixin.qq.com/s/OYb3BcLW7…