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-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使用场景
- 用来进行庞大的计算
- 可以在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://），它所加载的脚本，必须来自网络。
网友评论