JavaScript事件轮询机制Event Loop

857 阅读1分钟

Event Loop事件轮询机制是什么?

要想知道这个概念, 这里我先卖个关子, 你需要先知道浏览器都包含什么线程

浏览器线程

浏览器线程分为5个线程:

  1. JS解析线程 (javaScript属于单线程,每次只能去处理一件事)

  2. GUI渲染线程 (可以理解成解析加载css tree和 dom tree,生成render tree生成页面,包括重绘都是会触发GUI线程,与此同时 GUI线程和JS主线程是互斥的,即不能同时存在 )

  3. 网络请求线程 (它可以异步处理http请求,请求回来的数据仍在事件队列线程中,等JS线程空下来之后, 才会推到JS线程中执行, 属于微任务)

  4. 定时器线程 ( 指的是setTimeout,setInterval,JS线程没办法读秒,所以读秒的任务就是定时器线程在做, 定时器属于宏任务)

  5. 事件队列线程 ( 这个线程指的是异步回调结束之后, 暂时放在这个线程中,等待JS线程空下来后再次执行 )

下面上图

这里要再啰嗦一下宏任务和微任务,宏任务 也就是指的是 setTimeout, setInterval, 而微任务指的是 Promise网络请求, nextTick, onLoad事件等等 , 宏任务执行的之前会先把之前的微任务执行完毕, 再去执行宏任务, 宏任务在秒数时间到的时候扔进事件队列中, 等待JS线程有空的时候,推进JS主线程中执行


最后Event Loop 是什么? 循环重复 3, 4, 5这样的步骤就是事件轮询机制.