Web Worker的使用

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

//test.html
<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
        //WEB页主线程
        var worker = new Worker("worker.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
        worker.postMessage("hello world");     //向worker发送数据
        worker.onmessage = function (evt) {     //接收worker传过来的数据函数
            console.log(evt.data);              //输出worker发送来的数据
            worker.terminate();
        }
    </script>
</head>

<body></body>

</html>

使用命令http-server启动

然后就可以通过

http://127.0.0.1:8081/test.html访问了

然后我们来分析一下：

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使用场景

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

web worker的局限

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