postMessage和web worker

postMessage

<body>
    <iframe src="http://localhost:4000/b.html" id="frame" onload="load()"></iframe>
</body>
<script>
function load() {
    let iframe = document.querySelector('#frame')
    iframe.contentWindow.postMessage('i love you', 'http://localhost:4000')
}
</script>
<body>
    window.onmessage = function(e){
        console.log(e.data)
        e.source.postpostMessageme('i don't love you', e.origin)
    }
</body>
复制代码

web worker

let worker = new Worker('./worker.js');
worker.postMessage(1000); // 发消息
worker.onmessage = function (e) { // 接收消息
  console.log(e.data); // 消息中的数据
}
console.log(2);


./worker.js
onmessage = function (e) {
  let sum = 0;
  for(var i = 0;i<e.data;i++){
    sum += i;
  }
  this.postMessage(sum)
}
// 这里不能操作dom
复制代码
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web Worker 是 HTML5 中新增的一个标准,它允许在浏览器中创建后台线程来执行 JavaScript 脚本,从而在一定程度上提高了页面的响应速度和性能。在 TypeScript 中,可以使用 lib.webworker.d.ts 文件来定义 Web Worker 相关的类型和 API,其中包括: - Worker 接口:表示一个 Web Worker,它可以通过 postMessage() 方法发送消息到主线程,也可以通过 onmessage 属性监听主线程发送的消息。 - DedicatedWorkerGlobalScope 接口:表示 Web Worker 线程中的全局作用域对象,它可以通过 importScripts() 方法导入其他 JavaScript 脚本,也可以通过 close() 方法关闭自身。 - MessageEvent 接口:表示 Web Worker 接收到的消息事件对象,它包含了一个 data 属性,用于存储主线程发送过来的数据。 - SharedWorker 接口:表示一个共享 Web Worker,它可以被多个浏览器窗口或标签页共享,从而达到多进程协作的效果。 - SharedWorkerGlobalScope 接口:表示共享 Web Worker 线程中的全局作用域对象,它与 DedicatedWorkerGlobalScope 类似,但可以被多个浏览器窗口或标签页共享。 - Transferable 接口:表示一种可以被转移的对象,例如 ArrayBuffer、MessagePort 等,它们可以被传递给 Web Worker 或者其他线程,并在传递过程中进行零拷贝优化。 除此之外,lib.webworker.d.ts 文件还定义了一些其他的类型和接口,例如 postMessage() 方法、onerror 事件、close() 方法等,这些都是 Web Worker 中常用的 API。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值