我們知道：在瀏覽器環(huán)境中，常見的 macro task 有 setTimeout、MessageChannel、postMessage、setImmediate。而常見的 micro task 有 MutationObsever 和 Promise.then。

Vue中對于 macro task 的實現(xiàn)，優(yōu)先檢測是否支持原生 setImmediate，這是一個高版本 IE 和 Edge 才支持的特性，不支持的話再去檢測是否支持原生的MessageChannel，如果也不支持的話就會降級為 setTimeout 0。

現(xiàn)在我想了解一下這個MessageChannel，查了一下還是看規(guī)范比較好。

W3Schools 跟 W3C 組織沒有關(guān)系

W3Schools 的內(nèi)容漏洞百出，而且沒有給閱讀者深入了解的參考，對所有內(nèi)容淺嘗輒止，不是一個教程該有的態(tài)度。

另外還有W3CSchool，W3CSchool 是 W3C 中國社區(qū)的成員，網(wǎng)上也講了兩者的區(qū)別?？傊?，感覺都不是特別靠譜。

所以還是看MDN吧：2017年10月18日，W3C宣布加入Mozilla開發(fā)者網(wǎng)絡(luò)合作，與Mozilla、微軟、谷歌、三星一起，共同支持MDN Web 文檔（MDN Web Docs）項目。而且也有中文的呢，雖然是大家一起翻譯的一部分。

MessageChannel

MessageChannel API允許我們創(chuàng)建一個新的消息通道，并通過它的兩個MessagePort屬性發(fā)送數(shù)據(jù)。

目前的支持度

使用：

var channel = new MessageChannel();
這樣就創(chuàng)建了一個管道。

實例屬性：

channel.port1
channel.port2

獲取實例的兩個端口，注意的是，兩個端口都是只讀的。

簡單來說，MessageChannel創(chuàng)建了一個通信的管道，這個管道有兩個端口，每個端口都可以通過postMessage發(fā)送數(shù)據(jù)，而一個端口只要綁定了onmessage回調(diào)方法，就可以接收從另一個端口傳過來的數(shù)據(jù)。

一個簡單的例子：

        var channel = new MessageChannel();
        var port1 = channel.port1;
        var port2 = channel.port2;
        port1.onmessage = function(event) {
            console.log("port1收到來自port2的數(shù)據(jù)：" + event.data);
        }
        port2.onmessage = function(event) {
            console.log("port2收到來自port1的數(shù)據(jù)：" + event.data);
        }

        port1.postMessage("發(fā)送給port2");
        port2.postMessage("發(fā)送給port1");

運行結(jié)果截圖

（1）深拷貝

最近發(fā)現(xiàn)MessageChannel還可以用于深拷貝，我們都知道深拷貝一般用JSON.parse(JSON.stringify(object))就可以解決了，

也知道這種方法的局限性：

• 會忽略 undefined
• 不能序列化函數(shù)
• 不能解決循環(huán)引用的對象

undefined和函數(shù)會被忽略，而嘗試拷貝循環(huán)引用的對象則會報錯：

image.png

一般來說，這個方法都能解決大部分問題，而且性能也是最好的。

但是我最近發(fā)現(xiàn)MessageChannel的postMessage傳遞的數(shù)據(jù)也是深拷貝的，這和web worker的postMessage一樣。而且還可以拷貝undefined和循環(huán)引用的對象。

代碼：

// 有undefined + 循環(huán)引用
    let obj = {
      a: 1,
      b: {
        c: 2,
        d: 3,
      },
      f: undefined
    }
    obj.c = obj.b;
    obj.e = obj.a
    obj.b.c = obj.c
    obj.b.d = obj.b
    obj.b.e = obj.b.c

    function deepCopy(obj) {
      return new Promise((resolve) => {
        const {port1, port2} = new MessageChannel();
        port2.onmessage = ev => resolve(ev.data);
        port1.postMessage(obj);
      });
    }

    deepCopy(obj).then((copy) => {           // 請記住`MessageChannel`是異步的這個前提！
        let copyObj = copy;
        console.log(copyObj, obj)
        console.log(copyObj == obj)
    });

image.png

但拷貝有函數(shù)的對象時，還是會報錯：

image.png

這時候可能就要用到lodash這樣的函數(shù)庫了。

（2）此特性在 Web Worker 中可以使用。

當(dāng)我們使用多個web worker并想要在兩個web worker之間實現(xiàn)通信的時候，MessageChannel也可以派上用場：

<script>
    var worker1 = new Worker("worker1.js");
    var worker2 = new Worker("worker2.js");
    var channel = new MessageChannel();
    worker1.postMessage({ port1: channel.port1 });
    worker2.postMessage({ port2: channel.port2 });
    worker2.onmessage = function(event) {
        console.log(event.data);
    }
</script>

  self.onmessage = function(event) {
    const port1 = event.data.port1;
    setTimeout(function() {
      port1.postMessage("this is from worker2")
    }, 2000)
  }

    self.onmessage = function(event) {
        const port2 = event.ports;
        port2.onmessage = function(event) {
            self.postMessage(event.data);
        }
   }

一開始我寫出如上代碼，結(jié)果報了這樣的錯誤：

image.png

worker的數(shù)據(jù)傳遞是深復(fù)制的，這里報錯說MessagePort不能復(fù)制。
于是我查了一下Worker.postMessage()。

發(fā)現(xiàn)這個方法有第二個可選的數(shù)組參數(shù)，可以將MessagePort傳入，然后將控制權(quán)交給要發(fā)送到的worker。（這兩句是我翻譯的（如果還沒有被大神改掉的話），翻譯得不好別打我哈）

于是我把代碼改為：

// index.html
<script>
    var w1 = new Worker("worker1.js");
    var w2 = new Worker("worker2.js");
    var ch = new MessageChannel();
    w1.postMessage("port1", [ch.port1]);
    w2.postMessage("port2", [ch.port2]);
    w2.onmessage = function(e) {
        console.log(e.data);
    }
</script>

// worker1.js
  onmessage = function(e) {
    const  port = e.ports[0];
    port.postMessage("this is from worker1")        
  }

// worker2.js
    onmessage = function(e) {
        const port = e.ports[0];
        port.onmessage = function(e) {
            postMessage(e.data)
        }
    }

由于在worker中無法使用console.log，因此我們通過給w2綁定onmessage回調(diào)函數(shù)來驗證傳遞是否成功。最終我們可以看到控制臺中輸出

this is from worker1

傳遞的路徑為：
w1=> ch1 => ch2 => w2