web worker的使用

web worker的使用方法

//worker.js
onmessage =function (evt){
  var d = evt.data;//通过evt.data获得发送来的数据
  postMessage( d );//将获取到的数据发送会主线程
}

//test.html




    
    

使用命令http-server启动

> http-server

然后就可以通过http://127.0.0.1:8084/test.html访问，显示以下内容就成功了

如果直接使用浏览器打开test.html文件是会提示错误的

因为worker不同访问本地文件，所以会提示错误Uncaught DOMException: Failed to construct 'Worker': Script at 'file:///D:/work/workers/worker.js' cannot be accessed from origin 'null'.

然后我们来分析一下：

• WEB主线程:
  1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。
  2.通过worker.postMessage( data ) 方法来向worker发送数据。
  3.绑定worker.onmessage方法来接收worker发送过来的数据。
  4.使用 worker.terminate() 来终止一个worker的执行。

• worker新线程：
  1.通过postMessage( data ) 方法来向主线程发送数据。
  2.绑定onmessage方法来接收主线程发送过来的数据。

web worker使用场景

1. 用来进行庞大的计算
2. 可以在worker中通过importScripts(url)加载另外的脚本文件
3. 可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
4. 可以使用XMLHttpRequest来发送请求
5. 可以访问navigator的部分属性

web worker的局限

• 同源限制（不支持跨域）
  分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。
• DOM 限制（不能访问DOM）
  Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以使用navigator对象和location对象。
• 通信联系
  Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息Worker.postMessage()完成。
• 脚本限制
  Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。
• 文件限制
  Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

内容参考：
web worker的使用
HTML5 Web Worker的使用