简介
javascript在执行时是采用单线程执行的，即所有任务只能在一个线程上完成。但为了实现对浏览器多线程支持,html5提供web worker 创建多线程,但该线程受主线程控制，且子线程不能操作DOM,只有才能主线程可以操作DOM。
一、web worker:
是指在Javascript单线程执行的基础上，开启一个子线程，进行程序处理，而不影响主线程的执行，当子线程执行完毕之后再回到主线程上，在这个过程中并不影响主线程的执行过程。
二、web worker线程常见的方法：
1，创建新worker线程
var worker=new Worker("worker.js");//方法一
var worker=new Worker(blob);//方法二
以上两个都是创建worker线程， 传入参数是文件资源或Blob对象（blob对象代表原始二进制数据）
2，线程间通信---postMessage(data)（发送）
worker.postMessage('index：123455');//方法一
worker.postMessage({method: 'echo', args: ['Work']});//方法二
主线程若要向worker线程发消息，可以使用postMessage方法实现。它发送的参数可以是各种数据类型包括二进制
3，线程间通信---onMessage（接收、监听）
worker.addEventListener("message",target);//方法一
worker.onmessage=function (e) {//方法二
console.log('啊哈：--'+e.data);
}
主线程通过该方法监听并接收子线程发回来消息。
4、异常处理--error
worker.onerror = function(e){
console.log("error at "+e.filename ":" + e.lineno + e.message)
}
监听worker线程若发生错误，则触发该事件
5、关闭worker线程
// 主线程
worker.terminate();
// Worker 线程
self.close();
当使用完后使用该命令可以关闭worker。worker内部可以监听error事件。
6、导入脚本方法importScripts(urls)
此方法是worker的核心方法。该方法可用于导入一个或多个JavaScript脚本.例如importScripts("a.js","b.js","c.js");
7、sessionStorage/localStorage：完全可在worker线程中使用Strorage来执行本地存储
8、异步请求XMLHttpRequest
Worker线程中可以使用XMLHttpRequest来发送yibu
若上面的仍然不明白，那就动手复制下面代码运行下估计就明白了。
- 创建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>worker通信</title>
</head>
<body>
<script>
//创建新worker（子线程）
var worker=new Worker("worker.js");
/**主线程和子线程数据相互传送用以下方法
*1. postMessage(data);(发送数据)
* data:发送消息，提交data;
* 2.onmessage():（接收数据）
* 事件监听属性，通过该属性指定函数可以获取前台JavaScript脚本提交的数据；
*/
worker.postMessage('index：123455');
worker.onmessage=function (e) {
console.log('啊哈：--'+e.data);//打印结果：啊哈：--worker:worker发出的
}
</script>
</body>
</html>
- 创建woker.js
onmessage=function (e) {
console.log('worker:--'+e.data);//打印结果：worker:--index：123455
postMessage('worker:worker发出的');
}
运行结果
worker.png
三、web worker线程类型:
web worker线程类型分两种： 专用线程和共享线程。
1.专用线程Dedicated Worker
1.专用线程创建
var worker = new Worker("dedicated.js");
sharedworker中的参数是提供一个javascript脚本文件的URL地址或Blob.
2共享线程--onmessage（监听，结接收）
worker.port.onmessage = function(e){
...
}
共享线程也使用onmessage 事件监听线程消息，但使用SharedWorker对象的port属性与线程通信，接收data。
3共享线程--postMessage(data)发送
worker.port.postMessage("message");
使用SharedWorker对象的port属性向共享线程发送消息
2.共享线程Shared Worker
共享线程:为了避免线程重复创建和销毁过程，降低系统性能的消耗，共享线程可以同时有多个页面的线程链接。
1.共享线程创建
var worker = new SharedWorker("sharedworker.js");
sharedworker中的参数是提供一个javascript脚本文件的URL地址或Blob.
2共享线程--onmessage（监听，结接收）
worker.port.onmessage = function(e){
...
}
共享线程也使用onmessage 事件监听线程消息，但使用SharedWorker对象的port属性与线程通信，接收data。
3共享线程--postMessage(data)发送
worker.port.postMessage("message");
使用SharedWorker对象的port属性向共享线程发送消息
参考文档：
web worker介绍
https://www.xiangzongliang.com/blogContent?b=82#2、Web Worker
阮一峰web worker：
http://www.ruanyifeng.com/blog/2018/07/web-worker.html
web worker介绍
https://www.ibm.com/developerworks/cn/web/1112_sunch_webworker/
web worker详解
https://segmentfault.com/a/1190000012528806
JavaScript运行机制详解：Event Loop
http://www.ruanyifeng.com/blog/2014/10/event-loop.html
网友评论