欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Web Worker使用

程序员文章站 2022-07-03 16:06:32
...

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

Web Worker使用

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

Web Worker使用

 

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

 

Web Worker使用

因为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

上一篇： vue项目中用到的知识点（一）

下一篇： Web Worker

推荐阅读