WebWorker初体验

2019独角兽企业重金招聘Python工程师标准>>>

什么是 Web Worker？

WebWorker允许开发人员编写能够长时间运行而不被用户所中断的后台程序， 去执行事务或者逻辑，并同时保证页面对用户的及时响应。每个WebWorker执行都称为一个线程，彼此间互相独立，并且由浏览器中的 JavaScript 引擎负责管理。

创建 Web Worker

使用Worker()构造函数长创建Web Worker。如下所示

var worker = new Worker("js/worker.js");

将Worker中运行的JavaScript脚本的URL传递给该构造函数。

URL采用相对路径，则以包含调用Worker()构造函数脚本的文档的URL为参照的。

URL采用绝对路径，则必须和包含该脚本的文档时同源的。

主线程的JS和Web Worker通信

先看下面的例子。

主脚本

//main.js
var worker = new Worker("js/worker.js");

worker.onmessage = function(e){
    console.log(e.data);
}

//向worker Post消息
worker.postMessage("Post Message Form Main Threand.")

worker.js

//worker.js

onmessage = function(e){
    console.log(e.data);
    //向main.js  Post消息
    postMessage("Worker has received the message")
}

mian.js通过onmessage事件监听worker的消息，通过postMessage向worker发送消息。

当mian.js通过postMessage发送消息时，将触发worker的onmessage事件。反之worker调用postMessage，则会触发main.js中的onmessage事件。

使用Web Worker遇到的问题总结

1. Uncaught SecurityError: Failed to construct 'Worker': Script at‘URL’ cannot be accessed from origin 'null'.

    解决：HTML放到服务器端就OK了 

   2. 调试worker.js

    解决：Chorome  F12 打开开发工具，在Sources面板中右栏中找到Workers，勾选Pause on start

转载于:https://my.oschina.net/sevenhdu/blog/289171