如何使用JS中的webWorker?

更新日期: 2020-05-28阅读: 967标签: Worker

一、webWorker之初体验

在"setTimeout那些事儿"中,说到JavaScript是单线程。也就是同一时间只能做同一事情。

也好理解,作为浏览器脚本语言,如果JavaScript不是单线程,那么就有点棘手了。比如,与用户交互或者对dom进行操作时,在一个线程上修改某个DOM,另外的线程删除DOM,这时浏览器该如何抉择呢?

所以,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之常用API

接下来,再来看看关于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这个新特性


链接: https://www.fly63.com/article/detial/10368

Service Worker的生命周期

service worker的生命周期是它最复杂的部分。如果你不知道它在努力做什么和这么做的优势,你会感到它在跟你对着干。但一旦你知道了它的原理,你就可以给用户提供无缝的,优雅而不突兀的更新。一种同时具备网站应用和原生应用优势的体验。

Web Worker 详细介绍_Web Workers的使用

web worker 是运行在后台的 JavaScript,独立于其他脚本,也就是说在Javascript单线程执行的基础上,开启一个子线程,进行程序处理,而不影响主线程的执行。Service Worker 是一个由事件驱动的 worker,它由源和路径组成,以加载 .js 文件的方式实现的。

web worker是什么?理解并使用web worker

Web Worker 是为了解决 JavaScript 在浏览器环境中没有多线程的问题。正常形况下,浏览器执行某段程序的时候会阻塞直到运行结束后在恢复到正常状态,而HTML5的Web Worker就是为了解决这个问题,提升程序的执行效率。

Web Worker模拟选票

思路:五个人(5个div窗口模拟)同时进行抢票,有百分之十的几率可以抢到票,抢到票后对应的窗口(即随机生成的数大于等于0小于9的情况)会编程天蓝色,没抢到票的窗口(即随机生成的数大于9小于100的情况)会变成红色

Node.js中的Worker Threads

想要明白workers,首先需要明白node是怎样构成的。当一个node进程开始,它其实是:一个进程:是指一个全局对象,这个对象能够访问任何地方,并且包含当前处理时的此时信息。

动态创建 Web Worker 实践指南

作为前端,在消费接口提供的数据时,往往由于数据实际分布在不同地方(如一部分存储在 ODPS ,而另一部分可能更适合在应用初始化时从本地载入内存)而需要对数据进行区分处理。当然,交互的实现可能也会需要很重的计算逻辑

关于Web Workers你需要了解的7件事

Web Workers允许你在后台运行JavaScript代码,而不会阻止web用户界面。Web Workers可以提高网页的整体性能,还可以增强用户体验。Web Workers有两种风格 ——专用Web Workers和共享Web Workers

Web Worker 现状

Web 是单线程的。这让编写流畅又灵敏的应用程序变得越来越困难。Web Worker 的名声很臭,但对 Web 开发者来说,它是解决流畅度问题的 一个非常重要的工具。让我们来了解一下 Web Worker 吧

浅谈 HTML5 Web Worker,性能优化利器?

多线程是现代软件开发中用于增强应用的性能和响应能力的重要技术。然而,JavaScript 是一门单线程语言,它天生是不支持多线程的。为了克服这一限制,引入了 Web Workers。本文就来探讨 Web Workers 对 Web 多线程的重要性,以及使用它们的限制和注意事项。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!