Web Worker使用

快来打我* 2022-02-24 02:36 225阅读 0赞

**Web Workers 是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。**

**介绍**

通过使用Web Worker， 我们可以在浏览器后台运行Javascript， 而不占用浏览器自身线程。Web Worker可以提高应用的总体性能，并且提升用户体验。

## 有两种Web Worker ##

Web workers可分为两种类型：专用线程dedicated web worker，以及共享线程shared web worker。 Dedicated web worker随当前页面的关闭而结束；这意味着Dedicated web worker只能被创建它的页面访问。与之相对应的Shared web worker可以被多个页面访问。在Javascript代码中，“Work”类型代表Dedicated web worker，而“SharedWorker”类型代表Shared web worker。

在绝大多数情况下，使用Dedicated web worker就足够了，因为一般来说在web worker中运行的代码是专为当前页面服务的。而在一些特定情况下，web worker可能运行的是更为普遍性的代码，可以为多个页面服务。在这种情况下，我们会创建一个共享线程的Shared web worker，它可以被与之相关联的多个页面访问，只有当所有关联的的页面都关闭的时候，该Shared web worker才会结束。相对Dedicated web worker，shared 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

![Image 1][]

然后就可以通过`http://127.0.0.1:8084/test.html`访问，显示以下内容就成功了

![Image 1][]

如果直接使用浏览器打开test.html文件是会提示错误的

![Image 1][]

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

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

### web worker的局限 ###

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

### 在worker线程中，可以获得下列对象 ###

*   navigator对象
 *  location对象，只读
 *  XMLHttpRequest对象
 *  setTimeout/setInterval方法
 *  Application Cache
 *   通过importScripts()方法加载其他脚本
 *  创建新的Web Worker

### worker线程不能获得下列对象 ###

*  DOM对象
 *  window对象
 *  document对象
 *  parent对象

上述的规范，限制了在worker线程中获得主线程页面相关对象的能力，所以在worker线程中，不能进行dom元素的更新。

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

链接：https://www.jianshu.com/p/9ea0801886f2

[Image 1]: