【JavaScript】H5多线程的实现 — Web Worker

拼搏现实的明天。 2022-06-05 04:56 201阅读 0赞

## 什么是Web Worker ##

将JavaScript代码交给Web Worker在后台执行时，页面就可以在JavaScript运行期间依然可以响应用户操作，以防止出现页面卡死。用户可以创建多个Worker线程，这样就可以在前台做一些小规模分布式计算之类的工作。

> 　　分布式计算是一种计算方法，和集中式计算是相对的。随着计算基数的发展，有些应用需要非常巨大的计算能力才能完成，如果采用集中式计算，需要耗费相当长的时间来完成。分布式计算将该应用分解成许多小的部分，分配给多台计算机进行处理。这样可以节约整体计算时间，大大提高计算效率。  
> 　　而我上面所说的小规模分布式计算是对CPU多核的高效利用。

线程中**不能做**的事情：

*  Web Worker无法访问DOM节点 `不能共享DOM是正常的，否则这边在操作DOM，Worker那边也在操作DOM，甚至把DOM删除了，这不是冲突了嘛？`
 *  Web Worker无法访问全局变量或是全局函数
 *  Web Worker无法调用alert()或者confirm之类的函数
 *  Web Worker无法访问window、document之类的浏览器全局变量

线程中**能做**的事情：

*  能使用setTimeout()、clearTimeout()、setInterval()、clearInterval()等函数
 *  能使用navigator对象
 *  能使用XMLHttpRequest来发送请求
 *  能使用Web Storage
 *  能使用self获取本线程的作用域

--------------------

Web Worker可分为两种类型：专用线程（dedicated web worker），共享线程（shared web worker）。专用线程只能被创建它的页面访问，随当前页面的关闭而结束；而共享线程可以被多个页面访问，只有当所有关联的页面都关闭的时候才会结束。相对专用线程，共享线程稍微复杂些。

## 检测浏览器对Web Worker的支持 ##

if(typeof(Worker)!=="undefined")  {  
        // Yes! Web worker support! 
    }  else  {  
        // Sorry! No Web Worker support.. 
    }

## 创建Web Worker对象及文件： ##

> Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面  
> 一个worker是使用一个构造函数创建的一个对象(e.g. Worker()) 运行一个命名的JavaScript文件  
> 这个文件包含将在工作线程中运行的代码; workers 运行在另一个全局上下文中,不同于当前的window  
> 因此，使用 window快捷方式获取当前全局的范围 (而不是self) 在一个 Worker 内将返回错误

下面估计是最简单的入门级别的JS多线程Demo：

![这里写图片描述][SouthEast]

创建线程  
　　`var worker = new Worker(url);`//url为需要在线程中执行的JavaScript文件名及对应的路径  
　　  
线程通信  
　　在主线程与子线程间进行通信，使用的是线程对象的postMessage和onmessage方法。不管是谁向谁发送数据，发送方使用的都是postMessage方法，接收方都是使用的onmessage方法接收数据。postMessage和onmessage都只有一个参数，假定onmessage的参数为event，则通过event.data获取收到的数据。  
　　  
销毁线程

*  在线程外部，使用线程实例的terminate方法销毁线程
 *  在线程内部，使用close方法，线程自己销毁自己

处理错误  
　　当线程发生错误的时候，它的onerror事件回调会被调用。

var worker = new Worker("test.js");
    worker.onerror = function(event){ 
        console.log("load web worker error." + event);
    }

发送JSON数据  
　　复杂的数据就用JSON传送吧！

Web Worker中使用importScripts加载外部JS  
　　在HTML页面中，使用`<script>`标签加载外部的JS文件，而`<script>`标签还支持 *跨域* 加载JS。  
　　在Web Worker中要**注意**！  
　　Worker实例化的时候必须传入一个脚本的URL，而这个URL必须是在本域下，否则会报跨域错误！ `var worker = new Worker('http://localhost/worker.js');`  
　　但可以在worker.js中通过importScripts方法引入任何域下的脚本，如同HTML中的`<script>`标签一样。下面是合法的使用方法：

*  importScripts(); /\* imports nothing \*/
 *  importScripts(‘foo.js’); /\* imports just “foo.js” \*/
 *  importScripts(‘foo.js’, ‘bar.js’); /\* imports two scripts \*/
 *  importScripts(‘//example.com/hello.js’); /\* You can import scripts from other origins \*/

--------------------

可以利用这里的importScripts方法解决资源预加载的问题（浏览器预先加载资源，而不会对资源进行解析和执行），道理也很简单。

> Scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into importScripts() . This is done synchronously; importScripts() does not return until all the scripts have been loaded and executed.

--------------------

### 浏览器剖析 ###

![这里写图片描述][70]

[SouthEast]: /images/20220605/1630dfea7a454e19a2adb7078c83d8e5.png
[70]: /images/20220605/d0929733980c493986cde787ce6e1b9e.png