大家都知道js是單線程的腳本語言,在同一時間只能做同一件事,為了協(xié)調(diào)事件、用戶交互、腳本、UI渲染和網(wǎng)絡(luò)處理等行為,防止主線程阻塞,Event Loop方案應(yīng)運而生,這篇文章主要給大家介紹了關(guān)于js在瀏覽器中的event loop事件隊列的相關(guān)資料,需要的朋友可以參考下

前言

以下內(nèi)容是js在瀏覽器中的事件隊列執(zhí)行，與在nodejs中有所區(qū)別，請注意。

都說js是單線程的，不過它本身其實不是單線程，但是在瀏覽器中執(zhí)行時只分配一個線程進行執(zhí)行。

所以說js執(zhí)行是單線程的，一次只能進行一項任務(wù)，就是一件任務(wù)一件任務(wù)做，做完一件做下一件。

認識一個棧兩個隊列

一個調(diào)用棧Stack。

一個宏隊列，macrotask，也叫tasks。

一個微隊列，microtask，也叫jobs。

執(zhí)行過程

js就是執(zhí)行全局Script同步代碼，這中間碰到一些異步任務(wù)先加進對應(yīng)的隊列。

做完之后，調(diào)用棧就為空了。

然后將隊列(先微隊列后宏隊列)里面的首個任務(wù)提到調(diào)用棧來做，一件一件做完直到隊列中的任務(wù)都做完。

總結(jié)就是，先做同步的任務(wù)，再做微隊列的任務(wù)，再做宏隊列的任務(wù)。

異步任務(wù)怎么分配

這些異步任務(wù)包括但不限于：

以下分配給宏隊列：

setTimeout
setInterval
requestAnimationFrame
I/O
UI rendering

以下分配給微隊列：

Promise
Object.observe
MutationObserver

常見的宏隊列：setTimeout，常見的微隊列：Promise。

簡單例子

    console.log("同步任務(wù)1");

    setTimeout(() => {
      console.log("宏任務(wù)");
    });

    new Promise((resolve, reject) => {
      console.log("同步任務(wù)2");
      resolve("微任務(wù)");
    }).then((data) => {
      console.log(data);
    });

    console.log("同步任務(wù)3");

結(jié)果是（按標號加任務(wù)，按箭頭執(zhí)行）:

需要注意的是Promise的第一層沒有執(zhí)行回調(diào)之前是同步的，也就是上面的同步任務(wù)2。

難一點的例子

    console.log("同步任務(wù)1");

    console.log("同步任務(wù)2");

    new Promise((resolve, reject) => {
      console.log("同步任務(wù)3");
      setTimeout(() => {
        console.log("宏任務(wù)1");
        Promise.resolve()
          .then(() => {
            console.log("微任務(wù)5");
          })
          .then(() => {
            console.log("微任務(wù)6");
          });
      });
      resolve("微任務(wù)1");
    })
      .then((data) => {
        console.log(data);
        return "微任務(wù)3";
      })
      .then((data) => {
        console.log(data);
      });

    setTimeout(() => {
      console.log("宏任務(wù)2");
    }, 0);

    new Promise((resolve, reject) => {
      resolve("微任務(wù)2");
    })
      .then((data, resolve) => {
        console.log(data);
        return "微任務(wù)4";
      })
      .then((data) => {
        console.log(data);
      });

    console.log("同步任務(wù)4");

如何看呢，先看第一層，紅色代表同步，綠色微任務(wù)，藍色宏任務(wù)。

我們會把同步任務(wù)執(zhí)行完，然后看見微任務(wù)有倆，宏任務(wù)也有倆。

本來的執(zhí)行順序可能是這樣（我這里按照序號來表達順序了，請和簡單例子區(qū)分開來）：