带你了解JavaScript的运行机制—Event Loop

栏目: JavaScript · 发布时间: 5年前

内容简介：首先，众所周知，JS 是单线程的，为什么这种低效的运行方式依旧没有被淘汰那？这是由它的用途决定的；JS 主要用途是用户交互和DOM操作，举例来说假如js同时有两线程，一个线程在某个DOM节点上添加内容，另一个线程却删除了这个节点，这时候浏览器就不知所措了，该以哪个线程为标准那？（为了提高运行性能，新的 html5 里添加了由于 JS 是单线程，所以任务的执行就需要排队，一个一个执行，前一个任务结束了，下一个任务才能开始。但是当一个任务是异步任务时，浏览器就需要等待较长时间，才能得到它的返回结果继续执行，中间

首先，众所周知，JS 是单线程的，为什么这种低效的运行方式依旧没有被淘汰那？这是由它的用途决定的；JS 主要用途是用户交互和DOM操作，举例来说假如js同时有两线程，一个线程在某个DOM节点上添加内容，另一个线程却删除了这个节点，这时候浏览器就不知所措了，该以哪个线程为标准那？（为了提高运行性能，新的 html5 里添加了 web worker ，其能在主线程内添加子线程，但是限制了其无法操作DOM。）

任务队列（task queue）

由于 JS 是单线程，所以任务的执行就需要排队，一个一个执行，前一个任务结束了，下一个任务才能开始。但是当一个任务是异步任务时，浏览器就需要等待较长时间，才能得到它的返回结果继续执行，中间等待的时间cpu是空闲。JS 的应对方案是，将该任务暂时搁置，去执行其他任务。当有返回结果时再重新回来执行该任务。

这个暂时搁置，搁置于何处那，答案就是 任务队列 。

同步任务是指在主线程上执行的任务，只有前一个任务执行完毕，下一个任务才能执行。 异步任务 是指不进入主线程，而是进入任务队列（task queue）的任务，只有主线程任务执行完毕，任务队列的任务才会进入主线程执行。

执行栈（JS stack）

首先，我们先来了解一下堆（heap）和栈（stack）的概念。栈是用来静态分配内存的而堆是动态分配内存的，它们都是存在于计算机内存之中。栈是先进后出，堆是先进先出的。js的所有任务都是在js执行栈中执行的。先进入栈的任务后执行，但是大部分时候js执行栈内都只有一个任务。（下文会提及）

宏任务和微任务（task & Microtask）

上文说道异步任务不在主线程上执行，其实不单单是异步任务，所有的微任务都不在主线程上执行。由此其实我们可以将上文的任务队列称之为微任务队列。宏任务直接在主线程上自行，而微任务需要进入为任务队列，等待执行。

我们看一下代码（example1）

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');
复制代码

这个输出结果是什么那？

顺序是：

script start
script end
promise1
promise2
setTimeout
复制代码

首先我们视整段代码为一个 script 标签，它作为一个宏任务，直接进入js执行栈中执行：

输出==script start==；

遇到setTimeout，而0秒后setTimeout作为一个独立的宏任务加入到"宏任务队列"中。（注意这里说的是宏任务队列，也就是上文所说的主线程）；

遇到promise，promise完成后的第一个then作为一个独立的微任务加入到“微任务队列”中，第二个then又做为一个微任务加入到微任务的队列中。

然后输出==script end==；

现在，我们来理一下：script一整个宏任务执行完毕了，这时候js执行栈是空的，宏任务队列（主线程）中有一个setTimeout，而微任务队列中有两个promise(then)任务。先执行哪个？回想我们之前说的异步任务执行策略，就不难推测，下一个进入js执行栈就是第一个promise（then）；

输出 ==promise1==；

然后此时再看宏任务队列和微任务队列。微任务队列还有一个promise（then），所以将这个微任务压入js执行栈执行；

输出==promise2==；

此时，微任务队列为空，所以再去执行宏任务队列中的任务，setTimeout；

输出==setTimeout==；

总结来说，任务分为宏任务和微任务，对应宏任务队列（主线程）和微任务队列。微任务是在当前正在执行脚本结束之后立即执行的任务。当一个任务执行结束后，JS 执行栈空出来，这时候会首先去微任务队列中寻找任务，当微任务队列不为空时，将一个微任务加入到 JS 执行栈中。当当前的微任务队列为空时，再去执行宏任务队列中的任务。

如何区分微任务和宏任务:

宏任务（task）：是严格按照时间顺序压栈和执行的，所以浏览器能够使得 JavaScript 内部任务与 DOM 任务能够有序的执行。当一个 task 执行结束后，在下一个 task 执行开始前，浏览器可以对页面进行重新渲染。每一个 task 都是需要分配的，例如从用户的点击操作到一个点击事件，渲染HTML文档，同时还有上面例子中的 setTimeout。

setTimeout 的工作原理相信大家应该都知道，其中的延迟并不是完全精确的，这是因为 setTimeout 它会在延迟时间结束后分配一个新的 task 至 event loop 中，而不是立即执行，所以 setTimeout 的回调函数会等待前面的 task 都执行结束后再运行。这就是为什么 'setTimeout' 会输出在 'script end' 之后，因为 'script end' 是第一个 task 的其中一部分，而 'setTimeout' 则是一个新的 task。

微任务（Microtask）：通常来说就是需要在当前 task 执行结束后立即执行的任务，例如需要对一系列的任务做出回应，或者是需要异步的执行任务而又不需要分配一个新的 task，这样便可以减小一点性能的开销。microtask 任务队列是一个与 task 任务队列相互独立的队列，microtask 任务将会在每一个 task 任务执行结束之后执行。每一个 task 中产生的 microtask 都将会添加到 microtask 队列中，microtask 中产生的 microtask 将会添加至当前队列的尾部，并且 microtask 会按序的处理完队列中的所有任务。microtask 类型的任务目前包括了 MutationObserver 以及 Promise 的回调函数。

每当一个 Promise 被决议（或是被拒绝），便会将其回调函数添加至 microtask 任务队列中作为一个新的 microtask 。这也保证了 Promise 可以异步的执行。所以当我们调用 .then(resolve, reject) 的时候，会立即生成一个新的 microtask 添加至队列中，这就是为什么上面的 'promise1' 和 'promise2' 会输出在 'script end' 之后，因为 microtask 任务队列中的任务必须等待当前 task 执行结束后再执行，而 'promise1' 和 'promise2' 输出在 'setTimeout' 之前，这是因为 'setTimeout' 是一个新的 task，而 microtask 执行在当前 task 结束之后，下一个 task 开始之前。

进阶版，带你深入task & Microtask（example2）：

<body>
    <div class="outer">
      <div class="inner"></div>
    </div>
</body>
<script>
    var outer = document.querySelector('.outer');
    var inner = document.querySelector('.inner');

    new MutationObserver(function() {
      console.log('mutate');
    }).observe(outer, {
      attributes: true
    });

    function onClick() {
      console.log('click');
    
      setTimeout(function() {
        console.log('timeout');
      }, 0);

      Promise.resolve().then(function() {
        console.log('promise');
      });

      outer.setAttribute('data-random', Math.random());
    }

    inner.addEventListener('click', onClick);
    outer.addEventListener('click', onClick);
</script>
复制代码

当我们点击inner这个div的时候会输出什么那？

顺序是：

click
promise
mutate
click
promise
mutate
timeout
timeout
复制代码

为何是如此那？

这里要说明的是一个click操作作为一个宏任务，当这个inner的click对应的监听函数执行完后，即视为一个任务的完成，此时执行微任务队列中的promise（then）和 mutationObserver的回调。这两个任务执行完成后微任务队列为空，然后再执行冒泡造成的outter的click。当outter的click任务和微任务都执行完后，才会再去找宏任务队列（主线程）中剩下的两个setTimeout的任务。并将其一个一个的压入执行栈。

超级进阶版（example3）:

当我们在上面的js代码中加入下面这行代码时，会有什么不同吗？

inner.click()
复制代码

答案是：

click
click
promise
mutate
promise
timeout
timeout
复制代码

为何会有如此大的不同那？下面我们来仔细分析：

上一个例子中两个微任务在两个click之间执行，而这个例子中，却是在两个click之后执行的；

首先inner.click()触发的事件作为一个任务压入执行栈，由此产生的inner的监听函数函数又做为一个任务压入执行栈，当这个回调函数产生的任务执行完毕后，输出了 click，且微任务队列里面增加promise和mutate，那按上面的说法不是应该执行promise和mutate吗？然而并不是，因为此时 JS 执行栈内的inner.click()还没有执行结束，所以继续inner.click(）的事件触发outter的监听函数，由此再输出click，该回调结束后，inner.click()这个任务才算是结束，此时才会去执行微任务队列中的任务。

简单来说，在这个例子中，由于我们调用 inner.click() ，使得事件监听器的回调函数和当前运行的脚本同步执行而不是异步，所以当前脚本的执行栈会一直压在 JS 执行栈当中。所以在这个例子中的微任务不会在每一个 click 事件之后执行，而是在两个 click 事件执行完成之后执行。

Event Loop

JS 执行栈不断的从主线程中和微任务队列读取任务并执行，这个过程是循环不断的，所以整个的这种运行机制又称为 Event Loop （事件循环）

注：本文所有运行结果皆给予chrome浏览器，其他浏览器或有出入

参考文章 ： jakearchibald.com/2015/tasks-…

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

计算机科学概论(第7版) (平装)

J.Glenn Brookshear / 王保江 / 人民邮电出版社 / 2003-9 / 49.0

《计算机科学概论(第2版)》更新了部分内容，使其更加贴近于计算机科学领域内的最新趋势，这包括了网络安全、开源运动、关联存储、公钥加密、XML、Java和C#等内容。扩充了网络和Internet所覆盖的内容。一个程序用C#语言编写，还有C、C++和Java，作为语言的例子。不过整个方法依旧保持语言的独立。一起来看看《计算机科学概论(第7版) (平装)》这本书的介绍吧!

码农工具