如何使用JS中的webWorker

2024-07-31 08:49:33

一、webWorker之初体验

所以，JavaScript是单线程也是有背景的。

如下：

<!DOCTYPE html>
    <head>
        <title>singleThread</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
        <script>
            //添加到任务队列中，待同步任务所处的‘执行栈'执行完毕，1秒后执行任务队列中的这个匿名函数
            setTimeout(function(){
                console.log('come on');
            },1000);
            //只要不关闭该alert，‘执行栈'就没结束，从而也就不会进入到任务队列中
            alert('waiting');
        </script>
    </body>
</html>

但，HTML5引入了一个工作线程（webWorker）的概念。它允许开发人员编写能够长时间运行而不被用户所中断的后台程序，去执行事务或者逻辑，并同时保证页面对用户的响应。

简而言之，就是允许JavaScript创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。

从而，可以用webWorker来处理一些比较耗时的计算。

如下，主页面：

<!DOCTYPE html>
    <head>
        <title>worker</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script>
            function init(){
                //创建一个Worker对象，并向它传递将在新线程中执行的脚本url
                var worker = new Worker('worker.js');
                //接收worker传递过来的数据
                worker.onmessage = function(event){
                    document.getElementById('result').innerHTML+=event.data+"<br/>" ;
                };
            };
        </script>
    </head>
    <body onload = "init()">
        <div id="result"></div>
    </body>
</html>

下面是worker.js的内容:

var i = 0;
function timedCount(){
    for(var j = 0, sum = 0; j < 100; j++){
        for(var i = 0; i < 100000000; i++){
            sum+=i;
        };
    };
    //将得到的sum发送回主线程
    postMessage(sum);
};
//将执行timedCount前的时间，通过postMessage发送回主线程
postMessage('Before computing, '+new Date());
timedCount();
//结束timedCount后，将结束时间发送回主线程
postMessage('After computing, ' +new Date());

上面代码执行的流程是：创建的worker对象，并用onmessage方法接收worker.js里面postMessage传递过来的数据(event.data)，并将数据追加到div#result中。

所以，执行上面的代码结果如下：

图一

待worker.js中的timedCount方法运算完后，执行postMessage操作，向主线程传数据，得图二。期间，并不影响主线程的运作。

图二

二、webWorker之常用ＡＰＩ

接下来，再来看看关于worker的常用API：

1、postMessage(data)

子线程与主线程之间互相通信使用方法，传递的data为任意值。

//worker = new Worker('url');
//worker.postMessage传递给子线程数据，对象
worker.postMessage({first:1,second:2});

//子线程中也可以使用postMessage，如传递字符串
postMessage(‘test');

2、terminate()

主线程中终止worker，此后无法再利用其进行消息传递。注意：一旦terminate后，无法重新启用，只能另外创建。

//worker = new Worker('url');
worker.terminate();

如，主页面：

<!DOCTYPE html>
    <head>
        <title>worker</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script>
            function init(){
                var worker = new Worker('worker.js');
                //每隔100毫秒，向子线程传递{name: 'monkey'}信息
                setInterval(function(){
                    worker.postMessage({name: 'monkey'});
                },100);
                //当主线程worker收到来自子线程的消息后，触发message事件
                worker.onmessage = function(event){
                    document.getElementById('result').innerHTML+=event.data+"<br/>" ;
                    //主线程使用terminate方法中断与子线程来往，在浏览器中只能显示一次event.data
                    worker.terminate();
                };
            };
        </script>
    </head>
    <body onload = "init()">
        <div id="result"></div>
    </body>
</html>

子线程worker.js代码：

//当主线程发来信息后，触发该message事件
onmessage = function(event){
    //向主线程发送event.data.name信息
    postMessage(event.data.name);
};

3、message

当有消息发送时，触发该事件。且，消息发送是双向的，消息内容可通过data来获取。

message使用，可见terminate中的demo

4、error

出错处理。且错误消息可以通过e.message来获取。

如下：

//worker = new Worker('url');
worker.onerror = function(e){
    //打印出错消息
    console.log(e.message);
    //中断与子线程的联系
    worker.terminate();
}

另：worker线程从上到下同步运行它的代码，然后进入异步阶段来对事件及计时器响应，如果worker注册了message事件处理程序，只要其有可能触发，worker就一直在内存中，不会退出，所以通信完毕后得手动在主线程中terminate或者子线程中close掉，但如果worker没有监听消息，那么当所有任务执行完毕（包括计数器）后，他就会退出。

三、worker上下文

先看下面这段代码：

主页面：

<!DOCTYPE html>
    <head>
        <title>worker</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script>
            function init(){
                var worker = new Worker('worker.js');
                //接收消息事件
                worker.onmessage = function(event){
                    console.log(event.data);
                };
                //错误信息事件
                worker.onerror = function(e){
                    console.log('erro: ' + e.message);
                    //终止线程
                    worker.terminate();
                };
            };
        </script>
    </head>
    <body onload = "init()">

    </body>
</html>

worker.js

//window对象的alert方法
alert(1);
onmessage = function(event){
    //向主线程发送event.data.name信息
    postMessage(event.data.name);
};

执行上面代码结果：

为什么会这样呢？原因是alert为window对象的方法，所以会报错undefined。

worker.js执行的上下文，与主页面html执行时的上下文并不相同，最顶层的对象并不是window，woker.js执行的全局上下文，是个叫做WorkerGlobalScope的东东，所以无法访问window、与window相关的DOM API，但是可以与setTimeout、setInterval等协作。

WorkerGlobalScope作用域下的常用属性、方法如下：

1、self

我们可以使用 WorkerGlobalScope 的 self 属性来或者这个对象本身的引用

2、location

location 属性返回当线程被创建出来的时候与之关联的 WorkerLocation 对象，它表示用于初始化这个工作线程的脚步资源的绝对 URL，即使页面被多次重定向后，这个 URL 资源位置也不会改变。

3、close

关闭当前线程，与terminate作用类似

4、importScripts

我们可以通过importScripts()方法通过url在worker中加载库函数

5、XMLHttpRequest

有了它，才能发出Ajax请求

6、setTimeout/setInterval以及addEventListener/postMessage

四、关于worker

我们可以做什么：

1.可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信

2.可以在worker中通过importScripts(url)加载另外的脚本文件

3.可以使用setTimeout(), clearTimeout(), setInterval(), and clearInterval()

4.可以使用XMLHttpRequest来发送请求

5.可以访问navigator的部分属性

局限性：

1.不能跨域加载JS

2.worker内代码不能访问DOM

3.各个浏览器对Worker的实现不大一致，例如FF里允许worker中创建新的worker,而Chrome中就不行

4.IE这个新特性

以上就是浅谈webWorker的详细内容，更多关于浅谈webWorker的资料请关注我们其它相关文章！

JavaScript中sharedWorker 实现多页面通信的实例详解

是这样的,今天玩github,先是在没有登录浏览了一些页面,然后在某一页面进行了登录.这时再切换的其他页面时就看到了下面的提示: 那么这是怎么做到的呢?我们可以想到,一种办法是 localStorage,在某一个页面登录时,修改localStorage 状态,其他页面在显示的时候,读取最新的状态,然后显示提示: // 登录的页面 localStorage.setItem('login', true): // 其他页面 document.addEventListener("visibilitych
Javascript Worker子线程代码实例

这篇文章主要介绍了Javascript Worker子线程代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 main.js code: //创建 var worker = new Worker("./worker.js"); //发送 worker.postMessage(1); //接收 worker.onmessage = (e)=>{ console.log("main.js:"); consol
nodejs中使用worker_threads来创建新的线程的方法

简介之前的文章中提到了,nodejs中有两种线程,一种是event loop用来相应用户的请求和处理各种callback.另一种就是worker pool用来处理各种耗时操作. nodejs的官网提到了一个能够使用nodejs本地woker pool的lib叫做webworker-threads. 可惜的是webworker-threads的最后一次更新还是在2年前,而在最新的nodejs 12中,根本无法使用. 而webworker-threads的作者则推荐了一个新的lib叫做web-wo
JavaScript中的Web worker多线程API研究

HTML5支持了Web Worker这样的API,允许网页在安全的情况下执行多线程代码.不过Web Worker实际上受到很多限制,因为它无法真正意义上共享内存数据,只能通过消息来做状态通知,所以甚至不能称之为真正意义上的"多线程". Web Worker的接口使用起来很不方便,它基本上自带一个sandbox,在沙箱中跑一个独立的js文件,通过 postMessage和 onMessge来和主线程通信: 复制代码代码如下: var worker = new Worker("
深入理解Node.js中的Worker线程

概述多年以来,Node.js都不是实现高 CPU 密集型应用的最佳选择,这主要就是因为JavaScript的单线程.作为对此问题的解决方案,Node.jsv10.5.0 通过worker_threads模块引入了实验性的 "worker 线程" 概念,并从 Node.js v12 LTS 起成为一个稳定功能.本文将解释其如何工作,以及如何使用 Worker 线程获得最佳性能. Node.js 中 CPU 密集型应用的历史在 worker 线程之前,Node.js 中有多种方式执行
Javascript Web Worker使用过程解析

Web Worker 概述 JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事.前面的任务没做完,后面的任务只能等着.随着电脑计算能力的增强,尤其是多核 CPU 的出现,单线程带来很大的不便,无法充分发挥计算机的计算能力. Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行.在主线程运行的同时,Worker 线程在后台运行,两者互不干扰.等到 Worker 线
Yii2结合Workerman的websocket示例详解

前言本文主要给大家介绍了关于Yii2结合Workerman的websocket的相关内容,两者都是好东西,我就想着能不能结合起来,这样Yii2出现瓶颈的时候有些业务就可以平滑地迁移到Workerman中.下面话不多说了,来随着小编来一起看看详细的介绍吧步骤如下 1.安装workerman composer require workerman/workerman 2.启动workerman 创建commands/WorkermanWebSocketController.php文件创建acti
理解JavaScript中worker事件api

如果你不是很了解Event事件,建议先这篇文章<理解javascript中DOM事件>. 首先,我们需要实例一个Worker的对象,浏览器会根据新创建的worker对象新开一个接口,此接口会处理客户端与indexedDB数据库之间的通信.这里的数据库是指浏览器数据库.如果,你需要判断浏览器是否支持worker对象,详见如下代码.或者浏览器是否支持indexedDB数据库,详见同下,二者判断最好选择前者.因为IE不支持indexedDB . if(window.Worker){ dosometh
如何使用JS中的webWorker

目录一.webWorker之初体验二.webWorker之常用API 1.postMessage(data) 2.terminate() 3.message 4.error 三.worker上下文四.关于worker 一.webWorker之初体验所以,JavaScript是单线程也是有背景的. 如下: <!DOCTYPE html> <head> <title>singleThread</title> <meta http-equiv=&qu
在Node.js中使用HTTP上传文件的方法

开发环境我们将使用 Visual Studio Express 2013 for Web 作为开发环境, 不过它还不能被用来做 Node.js 开发.为此我们需要安装 Node.js Tools for Visual Studio. 装好后 Visual Studio Express 2013 for Web 就会转变成一个 Node.js IDE 环境,提供创建这个应用所需要的所有东西..而基于这里提供的指导,我们需要: 下载安装 Node.js Windows 版,选择适用你系统平台的
three.js中多线程的使用及性能测试详解

前言今天郭先生说一下WebWorker以及WebWorker在three.js中的应用.我们都知道Javascript是单线程的,比如执行js代码的同时UI渲染就会停止,对于多核CPU的点脑,这一点让人难以接受,好在Web Worker的出现多少解决了一些问题.官方说Web Worker指的是一种可由脚本创建的后台任务,任务执行中可以向其创建者收发信息.要创建一个 Worker ,只须调用 Worker(URL) 构造函数,函数参数 URL 为指定的脚本.关于Web Worker的更多知识请阅
Angular.js中window.onload(),$(document).ready()的写法浅析

一,问题发现: 最近公司有个微信公众号项目,为了方便直接使用anular.js+ionic进行开发,里面有使用到echarts图表,具体开发中发现echarts在初始化绑定图表的DOM节点时,一直提示该节点不合法;可是明明已经把代码写在了window.onload()中了,又改成$(function(){})结果还是不行. 二,解决方案 1使用angular.element <script type="text/javascript"> angular.element(wi
Angular.js中数组操作的方法教程

前言前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.最近在学习Angular.js,将自己学习的一些经验技巧分享给大家,下面本文将给大家介绍关于Angular.js中数组操作的相关资料,话不多说了,来一起看看详细的介绍. 1:ng-click,ng-model,ng-bind,ng-class,ng-hide,ng-app 2:placeholder, 3:{}中加入代码":true|false",使用逗号隔开,可以
Angular.js中$resource高大上的数据交互详解

本文主要给大家介绍的是关于Angular.js中$resource数据交互的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: $resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互. 需要注入 ngResource 模块.angular-resource[.min].js 默认情况下,末尾斜杠(可以引起后端服务器不期望出现的行为)将从计算后的URL中剥离. 这个可以通过$resourceProvider配置: app.config(
Angular.js中控制器之间的传值详解

前言每个controller都会有自己的scope,所有的scope都是属于 $rootScope的子或者子的子... 那么问题就好解决了,通过 $rootScope.$broadcast 广播的事件每个controller都能收到事件另外,我的经验是,尽量不要用event传数据.应该建立一个service来保存数据,并且设置相应getter/setter,具体如下: 每个controller依赖service, call service.setter(...) 统一的service.set
深入浅析js中的正则表达式

阅读目录正则表达式的创建正则表达式中的特殊字符 \ (反斜杠) ^ $ *, +, .(小数点) ? (问号) (x) (?:x) x(?=y), x(?!y), x|y {n}, {n,m}: [xyz], [^xyz] 其他正则表达式标志正则表达式使用很多时候多会被正则表达式搞的晕头转向,最近抽出时间对正则表达式进行了系统的学习,整理如下: 正则表达式的创建两种方法,一种是直接写,由包含在斜杠之间的模式组成:另一种是调用RegExp对象的构造函数. 两种方法的创建代码如下:
js中settimeout方法加参数

js中settimeout方法加参数的使用.简单使用看w3school 里面没有参数调用, 例子: 复制代码代码如下: <script type="text/javascript"> function timedMsg() { var a ="dd"; var t=setTimeout(function(){ cao(a);},3000) } function cao(a) { alert(a); } </script> </head
使用JS中的exec()方法构造正则表达式验证

正则表达式,又称正规表示法.常规表示法.(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表达式使用单个字符串来描述.匹配一系列符合某个句法规则.在很多文本编辑器里,正则表达式通常被用来检索.替换那些符合某个模式的文本. 一.Javascript中的正则表达式在Javascript中,可以使用RegExp对象构造正则表达.我们需要新建一个实例化的RegExp()对象,可以传入两个参数:第一个参数是匹配的模式,第二个参数是一