我們知道：在瀏覽器環(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 的內(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");
（1）深拷貝
最近發(fā)現(xiàn)MessageChannel還可以用于深拷貝说铃，我們都知道深拷貝一般用JSON.parse(JSON.stringify(object))就可以解決了访惜，
也知道這種方法的局限性：
- 會忽略
undefined - 不能序列化函數(shù)
- 不能解決循環(huán)引用的對象
undefined和函數(shù)會被忽略，而嘗試拷貝循環(huán)引用的對象則會報錯：
一般來說截汪，這個方法都能解決大部分問題疾牲，而且性能也是最好的。
但是我最近發(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)
});
但拷貝有函數(shù)的對象時，還是會報錯：
這時候可能就要用到lodash這樣的函數(shù)庫了济锄。
（2）此特性在 Web Worker 中可以使用暑椰。
當我們使用多個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é)果報了這樣的錯誤：
worker的數(shù)據(jù)傳遞是深復制的一汽，這里報錯說MessagePort不能復制。
于是我查了一下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
