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 方法
<body>
    <div>a page</div>
    <iframe src="b.html" id="frame"></iframe>
    <script>
        var frame = document.getElementById('frame')
        frame.onload = function(){
            frame.contentWindow.postMessage({ name: 'a page' },'*');
        }
    </script>
</body>

// 子页面监听 message 事件设置回调打印 event
<body>
    <div>b page</div>
    <script>
        window.addEventListener("message", (event) => console.log('this b page', event), false);
    </script>
</body>
  • 子页面向父页面传值
// 父页面监听 message 事件设置回调打印 event
<body>
    <div>a page</div>
    <iframe src="b.html" id="frame"></iframe>
    <script>
        window.addEventListener("message", (event) => console.log('this a page', event), false);
    </script>
</body>

// 使用 parent 获取 window 对象,调用 postMessage 方法
<body>
    <div>b page</div>
    <script>
        console.log(parent)
        parent.postMessage( {name: 'b page'}, '*');
    </script>
</body>

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 循环,因为数字太大运行时会有明显的卡顿

<html> 
<head> 
<title>Test Web worker</title> 
<script type="text/JavaScript">
    window.onload = function(){
        for(var num=99;num<1000000000;num++){ 
            document.getElementById("numshow").innerHTML += event.data+"<br/>"; 
        }
    }
</script>
</head> 
<body id="numshow">
</body>
</html>

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

<html> 
<head> 
<title>Test Web worker</title> 
<script type="text/JavaScript">

    window.onload = function() {

        console.log(5);
        
        var worker = new Worker(URL.createObjectURL(new Blob(["(" + webWorker.toString() + ")()"], {type: 'text/javascript'})));
        
        worker.onmessage= (event) => { 
            
            // 数据打印
            console.log(event.data);
            document.getElementById("numshow").innerHTML += event.data+"<br/>"; 

            // 向 worker 线程发送数据
            event.data === 1 ? worker.postMessage('num'):''
        }; 
    }

    function webWorker() {

        // worker 对象 self
        console.log(self)

        // 接收来自主线程的数据
        self.onmessage = function (event) { 
            console.log(event.data);
        }

        for (var num = 1; num < 1000000000; num++) { 

            // 当 num === 200的时候关闭 worker 线程
            num === 200 ? (postMessage("worker关闭"), close()) : postMessage(num**2)
        }
    }
    
</script>
</head> 
<body id="numshow">
</body>
</html>

参考文章

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

推荐阅读更多精彩内容