JS多线程WebWorker

时间 2019-11-08

原文原文链接

JS多线程WebWorker

一,介绍与需求

1.1,介绍

Web Worker能够为JavaScript建立多线程，且Web Worker 是运行在后台的 JavaScript，独立于其余脚本，不会影响页面的性能。主线程在运行的时候，worker也在后台运行，二者互不干扰，当worker线程完成任务后就能够将结果返回给主线。javascript

当咱们建立一个新的worker时，该代码会运行在一个全新的javascript的环境中（WorkerGlobalScope）运行,是彻底和建立worker的脚本隔离，这时咱们能够吧建立新worker的脚本叫作主线程，而被建立的新的worker叫作子线程。
WorkerGlobalScope是worker的全局对象，因此它包含全部核心javascript全局对象拥有的属性如JSON等，window的一些属性，也拥有相似于XMLHttpRequest()等。java

目前基本全部主流浏览器均支持 Web Worker，除了 Internet Explorer。web

1.2,需求

JavaScript是单线程模型，即全部任务都在一个线程上完成，前面一个任务若是没有执行完成，后面的任务就只能等待。若是在遇到耗时的计算时，程序就会阻塞在这里，这对用户来讲时不可接受的。所以咱们若是在遇到耗时或者大量计算的时候就可使用Web Worker,以避免影响用户的使用体验。ajax

二,WebWorker的使用

2.1,WebWorker的限制

WebWorker是浏览器为咱们提供的一个能够在浏览器后台开启一个新的线程的API，使得运行在浏览器中的 js 有了多线程的能力。可是这并不意味这js自己就支持多线程，由于这种新线程有不少限制：算法

同源限制
worker线程执行的脚本文件必须和主线程的脚本文件同源的。canvas
文件限制
为了安全，worker线程没法读取本地文件即不能打开本机的文件系统（file://），它所加载的脚本必须来自网络，且须要与主线程的脚本同源浏览器
DOM操做限制
worker线程在与主线程的window不一样的另外一个全局上下文中运行，其中没法读取主线程所在网页的DOM对象，也不能获取 document、window、parent等对象，可是能够获取navigator、location(只读)、XMLHttpRequest、setTimeout等浏览器API。安全
通讯限制
Worker 线程和主线程不在同一个上下文环境，它们不能直接通讯，必须经过postMessage消息完成。websocket
脚本限制
Worker 线程不能执行alert()方法和confirm()方法，但可使用 XMLHttpRequest 对象发出 AJAX 请求。网络

2.2,例子

有一种连续转换的方式能够直接将一个普通函数变成WebWorker对象,以下图所示：

不用加载JS文件,直接使用方法,以下：

 1  // 子进程方法
 2         function runWork() {
 3             onmessage = ({ data: { processId, message } }) => {
 4                 console.log('收到主线程消息：' + message);
 5                 postMessage({ processId, result: message * 2 });
 6             };
 7         }
 8         const makeWorker = (func) => {
 9             let pendingProcesss = {};
10             if (!window.Worker) {//浏览器不支持worker子线程的状况
11                 alert('浏览器不支持worker子线程');
12                 return;
13             }
14             //建立新的Worker
15             const worker = new Worker(
16                 URL.createObjectURL(new Blob([`(${func.toString()})()`]))
17             );
18             //接收消息
19             worker.onmessage = ({ data: { result, processId } }) => {
20                 // 调用resolve，改变Promise状态
21                 pendingProcesss[processId](result);
22                 // 删掉，防止进程id冲突
23                 delete pendingProcesss[processId];
24                 // 关闭worker线程
25                 worker.terminate();
26             }
27 
28             //异常处理
29             worker.onerror = function (err) { }
30 
31             return (...message) => new Promise(resolve => {
32                 const processId = String(Math.random())//new Date().getTime()

33                 pendingProcesss[processId] = resolve;
34                 //传递参数
35                 worker.postMessage({ processId, message });
36             })
37         }
38         const testWorker = makeWorker(runWork);
39         console.log('主线程正常运行：1')
40         testWorker(260).then((num) => {
41             console.log(`收到子线程的消息：${num}`)
42         })
43         console.log('主线程正常运行：2')

运行效果以下图所示:

2.3,使用场景

worker+ajax配合使用：
使用情景：

一、当项目中有多个后台接口数据较大时，能够开启一个线程。

二、当须要点击某按钮后链接后台获取大量数据或开启websocket时，能够开启一个线程。

三、加密数据
有些加解密的算法比较复杂，或者在加解密不少数据的时候，这会很是耗费计算资源，致使UI线程无响应，所以这是使用Web Worker的好时机，使用Worker线程可让用户更加无缝的操做UI。

四、预取数据
有时候为了提高数据加载速度，能够提早使用Worker线程获取数据，由于Worker线程是能够是用 XMLHttpRequest 的。

五、预渲染
在某些渲染场景下，好比渲染复杂的canvas的时候须要计算的效果好比反射、折射、光影、材料等，这些计算的逻辑可使用Worker线程来执行，也可使用多个Worker线程，这里有个射线追踪的示例。

六、复杂数据处理场景
某些检索、排序、过滤、分析会很是耗费时间，这时可使用Web Worker来进行，不占用主线程。

七、预加载图片
有时候一个页面有不少图片，或者有几个很大的图片的时候，若是业务限制不考虑懒加载，也可使用Web Worker来加载图片，能够参考一下这篇文章的探索，这里简单提要一下。

注意事项:

虽然使用worker线程不会占用主线程，可是启动worker会比较耗费资源
主线程中使用XMLHttpRequest在请求过程当中浏览器另开了一个异步http请求线程，可是交互过程当中仍是要消耗主线程资源

2.4,共享线程（SharedWorker）

共享线程是为了不线程的重复建立和销毁过程，下降了系统性能的消耗，共享线程SharedWorker能够同时有多个页面的线程连接。

使用SharedWorker建立共享线程，也须要提供一个javascript脚本文件的URL地址或Blob,该脚本文件中包含了咱们在线程中须要执行的代码

1     const makeWorker = () => {
2             var sharedWorker = new SharedWorker('./sharedworker.js')
3             sharedWorker.port.start()
4             sharedWorker.port.postMessage('你好，我是主线程！');
5             sharedWorker.port.onmessage = (e) => {
6                 console.log('子线程发回的参数：' + e.data);
7             };
8         }
9         makeWorker();

子线程 sharedworker.js：

1 onconnect = (e) => {
2     let port = e.ports[0];
3     port.onmessage=(e) => {
4         console.log(e.data); // 特别注意，共享线程的console.log是看不到的
5         port.postMessage('你好，我是SharedWorker！');
6     };
7     port.start();
8 }

效果以下:

使用场景:SharedWorker可实现多个标签页之间通讯

 1 let data = ''
 2 onconnect = (e) => {
 3     let port = e.ports[0];
 4     port.onmessage=(e) => {
 5         // console.log(e.data); // 特别注意，共享线程的console.log是看不到的
 6         // port.postMessage('你好，我是SharedWorker11！' + e.data);
 7         if (e.data === 'get') {
 8             port.postMessage('你好，我是SharedWorker11！' + data)
 9         } else {
10             data = e.data
11         }
12     };
13     port.start();
14 }

使用sharedWorker.port.postMessage('get');能够获取前一个方法设置的数据,实现多标签页之间的通讯

实现浏览器中多个标签页之间的通讯的方法有三种：使用websocket协议、经过localstorage、以及SharedWorker等等。

注意:虽然此文章里面把它叫WebWorker，可是它的真正名字就叫Worker