我们知道：在浏览器环境中，常见的 macro task 有 setTimeout、MessageChannel、postMessage、setImmediate。而常见的 micro task 有 MutationObsever 和 Promise.then。
Vue中对于 macro task 的实现，优先检测是否支持原生 setImmediate，这是一个高版本 IE 和 Edge 才支持的特性，不支持的话再去检测是否支持原生的MessageChannel，如果也不支持的话就会降级为 setTimeout 0。
现在我想了解一下这个MessageChannel，查了一下还是看规范比较好。
W3Schools 的内容漏洞百出，而且没有给阅读者深入了解的参考，对所有内容浅尝辄止，不是一个教程该有的态度。
另外还有W3CSchool，W3CSchool 是 W3C 中国社区的成员，网上也讲了两者的区别。总之，感觉都不是特别靠谱。
所以还是看MDN吧：2017年10月18日，W3C宣布加入Mozilla开发者网络合作，与Mozilla、微软、谷歌、三星一起，共同支持MDN Web 文档（MDN Web Docs）项目。而且也有中文的呢，虽然是大家一起翻译的一部分。
MessageChannel
MessageChannel API允许我们创建一个新的消息通道，并通过它的两个MessagePort属性发送数据。
使用：
var channel = new MessageChannel();
这样就创建了一个管道。
实例属性：
channel.port1
channel.port2
获取实例的两个端口，注意的是，两个端口都是只读的。
简单来说，MessageChannel创建了一个通信的管道，这个管道有两个端口，每个端口都可以通过postMessage发送数据，而一个端口只要绑定了onmessage回调方法，就可以接收从另一个端口传过来的数据。
一个简单的例子：
var channel = new MessageChannel();
var port1 = channel.port1;
var port2 = channel.port2;
port1.onmessage = function(event) {
console.log("port1收到来自port2的数据：" + event.data);
}
port2.onmessage = function(event) {
console.log("port2收到来自port1的数据：" + event.data);
}
port1.postMessage("发送给port2");
port2.postMessage("发送给port1");
（1）深拷贝
最近发现MessageChannel还可以用于深拷贝，我们都知道深拷贝一般用JSON.parse(JSON.stringify(object))就可以解决了，
也知道这种方法的局限性：
- 会忽略
undefined - 不能序列化函数
- 不能解决循环引用的对象
undefined和函数会被忽略，而尝试拷贝循环引用的对象则会报错：
一般来说，这个方法都能解决大部分问题，而且性能也是最好的。
但是我最近发现MessageChannel的postMessage传递的数据也是深拷贝的，这和web worker的postMessage一样。而且还可以拷贝undefined和循环引用的对象。
代码：
// 有undefined + 循环引用
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)
});
但拷贝有函数的对象时，还是会报错：
这时候可能就要用到lodash这样的函数库了。
（2）此特性在 Web Worker 中可以使用。
当我们使用多个web worker并想要在两个web worker之间实现通信的时候，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);
}
}
一开始我写出如上代码，结果报了这样的错误：
worker的数据传递是深复制的，这里报错说MessagePort不能复制。
于是我查了一下Worker.postMessage()。
发现这个方法有第二个可选的数组参数，可以将MessagePort传入，然后将控制权交给要发送到的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回调函数来验证传递是否成功。最终我们可以看到控制台中输出
this is from worker1
传递的路径为：
w1=> ch1 => ch2 => w2
作者：ceido
链接：https://www.jianshu.com/p/4f07ef18b5d7
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
