Event Loop(事件循环)机制

120 阅读3分钟

web worker

  • 单线程在保证了执行顺序的同时也限制了将 javaScript的效率,因此开发出了web worker技术。这项技术让javaScript成为一门多线程语言。
web worker技术开的多线程有着诸多限制
  • 所有新线程都受着主线程的完全控制,不能独立执行。这意味着这些“线程”实际上应属于主线程的子线程
  • 这些子线程并没有执行I/O操作的权限,只能为主线程分担一些诸如计算等任务
  • 严格来讲这些线程并没有完整的功能,也因此这项技术并非改变了javascript语言的单线程本质

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

执行栈与事件队列
  • 当javaScript代码执行的时候会将不同的变量存于内存中的不同位置:堆和栈
  • 栈中存放一些基础类型的变量以及对象的指针
  • 堆中存放着一些对象
  1. 执行栈
  • 当调用一个方法的时候,js会生成这个方法对应的执行环境,叫做执行上下文
  • 这个执行环境中存在着这个方法的私有作用域,上层作用域的指向,方法的参数,定义的变量,作用域的this对象
  • js是单线程,同一时间只能执行一个方法,于是这些方法被排队在执行栈。
  1. Js代码执行
  • 当一个脚本第一次执行的时候,js引擎会解析这段代码,并将其中的同步代码按照执行顺序加入执行栈中,然后从头开始
  • 当执行一个方法,那么js会向执行栈中添加这个方法的执行环境,然后进入这个执行环境继续执行其中的代码
  • 当这个执行环境中的代码执行完毕并返回结果之后,js会退出这个执行环境,并且销毁,回到上一个执行环境
  1. 事件队列
  • js引擎到一个异步事件后并不会一直等待返回结果,而是会将这个事件挂起,继续执行执行栈中的其他任务。
  • 当一个异步事件返回结果后,js会将这个事件加入与当前执行栈不同的另一队列,叫做事件队列
  • 被放入事件队列不会立刻执行其回调,而是等待当前执行栈中的所有任务都执行完毕
  • 主线程处于闲置状态时,主线程会去查找事件队列是否有任务。如果有,那么主线程会从中取出排在第一位的事件,并把这个事件对应的回调放入执行栈中,然后执行其中的同步代码...,如此反复,这样就形成了一个无限的循环。这就是这个过程被称为“事件循环 avatar 图中的stack表示我们所说的执行栈,web apis则是代表一些异步事件,而callback queue即事件队列。

macro task(宏任务)与micro task(微任务)

  1. 不同的异步事件被分为两类
  • 宏任务 setInterval() setTimeout()
  • 微任务 new Promise() new MutaionObserver()
  • 当执行队列为空的时候,主线程会查看微任务队列是否有事件存在。如果不存在,那么再去宏任务队列中取出一个事件并把对应的回到加入当前的执行栈;如果存在,则会依次执行队列中的事件对应的会调,知道微任务队列为空,然后去宏任务队列中取出最前面的一个事件。
  • 前执行栈执行完毕时会立刻先处理所有微任务队列中的事件,然后再去宏任务队列中取出一个事件。同一次事件循环中,微任务永远在宏任务之前执行。
setTimeout(function() {
    console.log(1);
});

new Promise(function(resolve, reject) {
    console.log(2)
    resolve(3)
}).then(function(val) {
    console.log(val);
})

console.log(4)
//2 4 3 1
  • promise括号里面是立即执行函数。所以先输出2