当前位置:首页 » 网页前端 » webworker实践
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

webworker实践

发布时间: 2022-06-12 04:45:48

1. 如何使用html5的web workers开启多线程

html5 web workers例子 - https://21xrx.com/full_stack/Html/html5_web_workers.html

2. WebWorker是什么鬼

Web Worker为Web应用程序提供了一种能在后台中运行的方法。通过Web Worker可以生成多个线程同时运行,并保证页面对用户的及时响应,完全不会影响用户的正常操作。

3. 有人实际工作项目中用过web worker吗

应该用的吧

4. vue-ssr 怎么使用 web worker

vue-worker的介绍和使用
vue-worker把复杂的web worker封装起来,提供一套非常简明的api接口,使用的时候可以说像不接触worker一样方便。web worker是通过一个浏览器提供的Worker对象来创建的,创建的时候要传入指定的javascript文件作为worker线程的执行脚本。worker线程内的脚本有一些限制,比如只能拿到window.navigator的信息,不能拿到完整的window对象。重点是,这里我们没有提供一个js文件传入worker线程,vue-worker是怎么做到的呢?它利用了Blob来创建一个可执行的二进制上下文,在通过这个上下文来调用我们传入的function,就好像在内存中虚拟了一个内容是我们传入的function的js文件一样。

5. 在webworker线程中可以使用indexedDB/localstorage吗

创建web worker
可以使用web workerAPI轻松的创建一个worker实例,例如:
var worker = new Worker("worker.js")
上面个的这行代码将会加载worker.js这个文件,然后再后台运行。你需要调用Worker()这个构造函数,并将需要在后台执行的文件的URI作为参数。如果你想从worker中得到数据,你需要注册该worker的onmessage事件处理函数,例如:
var worker = new Worker("router.js");
worker.onmessage = function(event){
console.log("called here form the router");
}
同样你也可以通过addEventListener来监听你的worker,
var worker = new Worker("router.js")
worker.addEventListener('message',function(event){
console.log("called here form the router");
},false);
worker.postMessage();//启动这个worker
web worker能做什么?不能做什么?
worker是不能访问“父”页面(即创建页面)的dom,他不能访问以下任何一个对象:
window 对象
document对象
parent对象
并且最后同样重要的是,在worker中不能使用依赖以上对象的javascript库,像jQuery。
由于多线程性质,web worker 只能访问某些特定的javascript特性。下面这些列表时他可以访问的
navigator对象
location对象(只读)
XMLHttpRequest方法
atob()、btoa()方法,可以讲base64编码转成二进制数据,或逆操作
setTimeout() / clearTimeout() and setInterval() / clearInterval()
mp()
应用程序缓存
可以通过importScripts()方法,导入外部js
创建次级worker 即 worker中创建worker
web worker 的执行
在web worker线程自身中,代码会自上而下的同步执行,之后他们会进入到事件响应的异步阶段。这样,就允许将web worker分成两大类:
注册了onmessage事件相应程序的web worker,用来长时间执行任务,并且在后台执行。这个web worker是不会推出的,因为他一直监听新的消息
另一种是没有注册onmessage事件的web worker,处理一个独立的任务(可以从web app 主线程中脱离的),例如抓取和解析超大的json对象。这样的web worker一点操作结束就会退出。(在某些情况下,如果你注册了callback处理,那么将会等待所有的callback结束后再退出。)

6. web workers何时使用

创建一个Worker

通常,与web worker相关的代码都放在一个独立的JavaScript文件中。父线程通过在Worker构造函数中指定一个JavaScript文件的链接来创建一个新的worker,它会异步加载并执行这个JavaScript文件。

var primeWorker = new Worker('prime.js');


启动Worker

要启动一个Worker,则父线程向worker传递一个信息,如下所示:

var current = $('#prime').attr('value');
primeWorker.postMessage(current);
父页面可以通过postMessage接口与worker进行通信,这也是跨源通信(cross-origin messaging)的一种方式。通过postMessage接口除了可以向worker传递私有数据类型,它还支持JSON数据结构。但是,你不能传递函数,因为函数也许会包含对潜在DOM的引用。

“父线程和worker线程有它们各自的独立空间,信息主要是来回交换而不是共享。”
信息在后台运行时,先在worker端序列化,然后在接收端反序列化。鉴于此,不推荐向worker发送大量的数据。

父线程同样可以声明一个回调函数,来侦听worker完成任务后发回的消息。这样,父线程就可以在worker完成任务后采取些必要的行动,比如更新DOM元素。如下代码所示:

primeWorker.addEventListener('message', function(event){
console.log('Receiving from Worker: '+event.data);
$('#prime').html( event.data );
});
event对象包含两个重要属性:

target:用来指向发送信息的worker,在多元worker环境下比较有用。
data:由worker发回给父线程的数据。
worker本身是包含在prime.js文件中的,它同时侦听message事件,从父线程中接收信息。它同样通过postMessage接口与父线程进行通信。

self.addEventListener('message', function(event){
var currPrime = event.data, nextPrime;
setInterval( function(){
nextPrime = getNextPrime(currPrime);
postMessage(nextPrime);
currPrime = nextPrime;
}, 500);
});
在本文例子中,我们寻找下一个最大的质数,然后不断将结果发回至父线程,同时不断更新界面以显示新的值。在worker的代码中,字段self和this都是指向全局作用域。Worker既可以添加事件侦听器来侦听message事件,也可以定义一个onmessage处理器,来接收从父线程发回的消息。

寻找下一个质数的例子显然不是worker的理想用例,但是在此选用这个例子是为了说明消息传递的原理。之后,我们会挖掘些可以通过web worker获得益处的实际用例。

7. 用WebSocket,WebWorker和requestAnimationFrame如何实现服务端定时推送随机数到客户端

你使用WebSocket就可以达到这个效果。WebWorker是优化的事情,requestAnimationFrame只和显示有关。
后端@ServerEndpoint的类里面对应前端的new WebSocket("ws://localhost:8080/websocket");
在后端的定时推送有两个办法
1、@OnOpen方法里面为每个webSocket创建一个线程去做定时及推送
2、@OnOpen将webSocket加入一个SET或者List,服务启动的时候就启动一个线程,定时为SET里面的所有webSocket发送随机数。

8. HTML5 web worker使用

在workjs中添加document.write("<script language=\"javascript\" src=\"youjs.js\"></script>")这样写

9. HTML5 Web Socket和Web Worker的区别以及使用方法

一、WEB SOCKET
1、Web Socket是一种协议、本质上和http、tcp一样、协议是用来说明数据是如何传输的,写过一个小的在线聊天使用了socket.io、之后总结这个项目
2、Web Socket的前缀有两种:(1)ws:// 不是加密的、 (2)wss:// 是加密的
3、客户端和服务端进行Web Socket交互的方式也可以理解为“http握手 tcp数据传输”的方式
(1)浏览器(支持Websocket的浏览器)像HTTP一样、发起一个请求、然后等待服务端的响应
(2)服务器返回握手响应、告诉浏览器请将后续的数据按照websocket制定的数据格式传过来
(3)浏览器和服务器的socket连接不中断、此时这个连接和http不同的是它是双工的了
(4)浏览器和服务器有任何需要传递的数据的时候使用这个长连接进行数据传递


HTTP握手:是因为浏览器和服务器在建立长连接的握手过程是按照HTTP1.1的协议发送的、有Request、Request Header、 Response、 Response Header、但是不同的是Header里面的字段是有特定含义的
TCP传输: 主要体现在建立长连接后、浏览器是可以给服务器发送数据、服务器也可以给浏览器发送请求的、当然它的数据格式并不是自己定义的、是在要传输的数据外层有ws协议规定的外层包的

4、数据传输过程:websocket的数据传输形式是:frame、比如会将一条消息分为几个frame、按照先后顺序传输出去、这样做会有几个好处
(1)大数据的传输可以分片传输、不用考虑到数据大小导致的长度标志位不足够的情况
(2)和http的chunk一样、可以边生成数据边传递消息、即提高传输效率

5、客户端使用Web Socket的语法:JavaScript、服务端:多种web框架支持

二、WEB WORKER
1、当在 HTML 页面中执行脚本时、页面的状态是不可响应的、直到脚本已完成、而Web Worker 是运行在后台的 JavaScript、独立于其他脚本、不会影响页面的性能、您可以继续做任何愿意做的事情:点击、选取内容等等、而此时 Web Worker 在后台运行
除了DOM操作之外、理论上任何JS脚本任务都可放入worker中执行;语法上的限制、则是不能跨域访问JS、worker常用于需要消耗大量时间和CPU资源的复杂计算、以换来前台用户操作的友好型;换句话说、从用户体验上看、提高了服务性能

2、Web Worker使用:(当我们创建 Web Worker 对象后、它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止)
(1)通过向 Web Worker 添加一个 "onmessage" 事件监听器来获取接受到的消息
(2)发送消息:postMessage()
(3)终止 Web Worker、并释放浏览器/计算机资源: terminate()

10. HTML5 Web Worker是利器还是摆设

Worker能解决两个问题:解决程序阻塞问题:提升效率。不过Worker还有局限性,它不能操作DOM。解决方法如下:

1、首先在创建之前,检测所用浏览器是否支持它,当前除了IE浏览器以外,其它主流浏览器都是支持的。