江门建网站广西住房建设部网站

江门建网站,广西住房建设部网站,广州 网站设计公司排名,wordpress调用页面标题工作者线程通信方式对比特性postMessage()MessageChannelBroadcastChannel通信模式点对点#xff08;直接通信#xff09;点对点#xff08;通道通信#xff09;一对多#xff08;广播通信#xff09;通信方向单向#xff08;发送到特定接收方#xff09;双向#xff…工作者线程通信方式对比特性postMessage()MessageChannelBroadcastChannel通信模式点对点直接通信点对点通道通信一对多广播通信通信方向单向发送到特定接收方双向通过端口相互通信单向广播发送给所有订阅者创建方式内置于Worker、Window、iframe等对象通过new MessageChannel()创建通过new BroadcastChannel(name)创建主要用途与特定工作者或窗口通信两个上下文之间的专用通道同源下的多个上下文间广播消息连接建立隐式通过目标对象的引用显式通过传递端口隐式通过共享频道名称消息路由直接发送到目标对象通过port1和port2端口发送到所有同名的频道订阅者典型应用场景主线程与 Worker 通信两个 Worker 之间直接通信多个标签页或窗口间同步状态关闭方式无法单独关闭通信需终止工作者可关闭单个端口或整个通道关闭频道或关闭上下文兼容性广泛支持包括 IE10广泛支持包括 IE10现代浏览器IE不支持消息事件监听onmessage或addEventListener(message, ...)port.onmessage或addEventListener(message, ...)onmessage或addEventListener(message, ...)传递机制结构化克隆算法支持大多数数据类型结构化克隆算法结构化克隆算法性能特点直接高效适合固定通信对适合需要双向通信的专用链路广播开销较大适合低频同步使用示例1.postMessage()javascript// 主线程 const worker new Worker(worker.js); worker.postMessage(Hello Worker); // Worker 线程 self.onmessage (e) { console.log(e.data); // Hello Worker self.postMessage(Hello Main); };2.MessageChanneljavascript// 创建通道 const channel new MessageChannel(); // 端口1监听 channel.port1.onmessage (e) { console.log(Port1 received:, e.data); }; // 通过端口2发送 channel.port2.postMessage(Hello through channel); // 可将端口传递给其他工作者 worker.postMessage({ port: channel.port2 }, [channel.port2]);3.BroadcastChanneljavascript// 所有需要通信的上下文 const channel new BroadcastChannel(app-channel); // 发送广播 channel.postMessage({ type: update, data: new data }); // 接收广播 channel.onmessage (e) { console.log(Received:, e.data); }; // 关闭 channel.close();选择建议使用postMessage()当需要与特定的工作者、窗口或 iframe 进行直接通信时使用MessageChannel当需要两个上下文之间建立专用的双向通信通道时使用BroadcastChannel当需要在同源下的多个上下文标签页、工作者等之间广播消息时这三种方式可以结合使用例如通过postMessage()传递MessageChannel的端口实现在不同工作者之间建立直接通信通道。