Web Worker && postMessage && onMessage 使用教程

**转自博客原文连接：https://tong-h.github.io/2019/04/21/webworker/
**

最近使用 iframe 的时候想要获取 iframe 文档信息的时候遇到了跨域问题，最后使用 postmessage 做父子页面通信解决需求也顺便学习了下 webworker 的使用
webWoker 使用依赖 postMessage() 和 onMessage(), 所以先说这两个吧

postMessage && onMessage

• 提供网页文档之间互相发送和接收信息的功能，可用于解决跨域访问的问题
• 会在所有页面脚本执行完毕之后(包括方法之后或者之前设置的timeout 事件)再执行
• 挂载于window对象上

postMessage 语法： otherWindow.postMessage(message, targetOrigin, [transfer]);

  message: 发送的数据，不限类型，因为他自己会序列化
  targetOrigin：通过窗口的origin属性指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI
  transfer：可选参数；一个 Transferable 对象([什么是Transferable[(https://developer.mozilla.org/zh-CN/docs/Web/API/Transferable))，和message 同时传递的,对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权

onMessage 语法：

window.addEventListener('message', function(event) { ... })
window.onmessage = function(event) { ... }

获取到的 event 对象包含

  data：接收的数据对象，对应 postMessage 的 message 参数
  origin：消息发送方窗口的 origin，字符串由 协议、“://“、域名、“ : 端口号”拼接而成
  source：对发送消息的窗口对象的引用

举个小栗子

• 父页面向子页面传值

// 在 iframe 加载完毕后，获取 iframe 的 window 对象，调用 postMessage 方法

    
a page
    
    


// 子页面监听 message 事件设置回调打印 event

    
b page
    

• 子页面向父页面传值

// 父页面监听 message 事件设置回调打印 event

    
a page
    
    


// 使用 parent 获取 window 对象，调用 postMessage 方法

    
b page
    

Workers

• 我自己感觉很多比较麻烦耗内存的js逻辑操作都可以放在worker里，比如轮询服务器状态或者一些很耗时量很大的数据操作用
• 让脚本在浏览器后台线程中运行
• 在worker内，不能直接操作DOM节点，也不能使用window对象的默认方法和属性，window对象下可用的方法
• worker 中也能再创建 worker
• 由于安全限制 Worker 不能读取本地文件，所以脚本必须来自网络，读取本地文件会报错 "Uncaught SecurityError: Failed to create a worker: script at '(path)/worker.js' cannot be accessed from origin 'null'."
• 关于兼容性

用法

在使用 worker 的 js文件里

// 使用 Worker() 指定脚本 url 创建一个新的 worker
// 参数就是 Worker 线程所要执行的任务
// Worker 使用 postMessage 和 onMessage 进行通信
var myWorker = new Worker("worker.js");

// 使用 postMessage() 和 onMessage() 发送和接收数据
myWorker.postMessage("request");

在 worker.js文件

// 消息响应
onmessage = function(e) {
  console.log(e.data);
  console.log(self)
  // 消息回传
  postMessage(workerResult);
}

关闭/错误/加载脚本

// 在 main.js 文件中，强制终止
worker.terminate();

// 在 worker 线程中，自己关闭
self.close();

// error 错误代理
worker.onerror(function (event) {});

// 发送的数据无法序列化成字符串时，会触发这个事件
Worker.onmessageerror(function (event) {});

// worker 使用 importScripts() 加载脚本，可以加载多个
importScripts('script1.js', 'script2.js');

小栗子

如果你现在没有条件加载网络上的文件，可以使用 URL.createObjectURL 方法建立缓存 URL
可以试着运行一下面两个页面感受一下

可以运行一下这个页面，一个普通的 for 循环，因为数字太大运行时会有明显的卡顿

这个可以使用 URL.createObjectURL 方法建立缓存 URL

参考文章

postMessage：MDN https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
webworker：MDN https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers
阮一峰：http://www.ruanyifeng.com/blog/2018/07/web-worker.html