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

什么是webworkers

发布时间: 2023-07-22 07:59:18

‘壹’ HTML5 Web Worker是利器还是摆设

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

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

‘贰’ HTML5(四)——Web Workers

JavaScript 语言是采用单线程模型,也就是任务只能在一个线程上完成,一次只能做一件事,前面任务没执行完,后面的任务只能排队等待,由于多核 CPU 的出现,单线程带来很大不便,无法充分发挥计算机的能力。

Web Worker 就是为了 javascript 创造多线程而生的,主线程创建 worker 子线程,将一些任务分配给后台运行,等到子线程完成计算任务,再把结果返回给主线程,好处是计算密集型或高延迟的任务被 worker 负担了,主线程就会很流畅。网页加载展示可分为两部分:主进程也叫 UI 进程,子进程也叫工作进程,子进程不能控制 UI 进程,只能进行数据交互。

Web Worker 子线程一旦创建成功,就会独立于其他脚本始终运行,不会被主线程上活动打断。这样有利于随时响应主线程的通信。但是这也造成 Worker 比较耗费资源,不应该过度使用,使用完毕之后应该关闭。

使用 Web Worker 注意点:

2.1 创建Worker线程:

创建worker之前,先检查浏览器是否支持它。使用 typeof 检查,代码如下:

检查浏览器支持 worker 之后,主线程使用 new 命令,调用 worker() 构造函数,新建 Worker 线程。

构造函数的参数是一个脚本文件,该文件不能是本地文件,必须来自网络脚本,该文件就是Worker 线程要执行的任务。如果该文件加载失败,Worker 就会失败。

2.2 主线程与子线程数据通信:

主线程调用 postMessage() 方法,向 Worker 发消息。postMessage(参数) 方法中参数就是传给 Worker 的数据,这个数据可以是任意格式。

紧接着 Worker 线程,通过 onmessage 指定监听函数,接收消息。worker.js 代码如下:

worker子进程收到消息之后,可以继续向主进程发送消息,使用 postMessage()。代码如上。

主进程也通过onmessage监听函数接收消息。

2.3 Worker线程

Worker线程内部,添加 this.onmessage 监听函数,其中 this 是子线程的全局对象,也可以替换成 self,self 代表子线程本身。等同于:

除了使用 self.onmessage 指定监听函数,也可以使用 this.addEventListener() 监听事件对象。上述 worker.js 代码可改为:

2.4 错误处理

主线程可以监听Worker是否发生错误,如果发生错误,Worker 会触发主线程的 error 事件。

worker 子线程也可以监听 error 事件。

2.5 关闭 Worker

Worker 比较耗费资源,不应该过度使用,使用完毕之后应该关闭。主线程和子线程都可以关闭。

通常情况下,Worker 载入的是一个单独的 javascript 文件,但是也可以载入与主线程在同一个网页的代码。网页中添加 Worker 脚本,必须注意指定script标签的type属性是一个浏览器不认识的值,否则就会失去意义。如:

然后,需要读取这段代码,先将嵌入网页的脚本代码转成二进制对象,然后为这个二进制对象生成url,再让worker加载url,这样就实现了主进程和worker在同一个网页内。代码如下:

Worker构造函数方法:

子进程属性方法:

Worker() 构造函数,可以接受两个参数,第一个是脚本的地址,第二个是参数是配置对象,该对象指定Worker的名称。如:

‘叁’ 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()

‘肆’ web workers 有哪些api

Web Workers 是一种机制,从一个web应用的主执行线程中分离出一个后台线程,在这个后台线程中运行脚本操作。这个机制的优势是耗时的处理可以在一个单独的线程中来执行,与此同时,主线程(通常是UI)可以在毫不堵塞的情况下运行。

Web Workers概念和用法
一个worker是一个使用构造函数(例如:Worker())来创建的对象,在一个命名的JS文件里面运行,这个文件包含了在worker线程中运行的代码。Workers不同于现在的window,是在另一个全局上下文中运行的。在专用的workers例子中,是由DedicatedWorkerGlobalScope对象代表了这个上下文环境(标准workers是由单个脚本使用的;共享workers使用的是SharedWorkerGlobalScope)。
在worker线程里面,你可以运行任何你喜欢的代码,当然也有一些例外。例如,你不能直接操作在worker里面的DOM,也不能使用window对象的一些默认方法和属性。但是,你可以使用window下许多可用的项目,包括WebSockets,类似IndexedDB和Firefox OS独有的Data Store API这样的数据存储机制。更多细节请查阅《Functions and classes available to workers》https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
Workers和主线程之间是通过系统消息来传递数据的。两边使用postMessage()方法来发送消息,通过onmessage事件处理程序来应答(消息是包含在Message事件的数据属性中。)系统消息是复制数据,不是共享数据。
只要workers和父页面同源,workers会轮流制造新workers。另外,workers会使用XMLHttpRequest作为网络I/O,但是有一个例外,XMLHttpRequest的responseXML和channel属性永远返回null。
除了专用workers,还有其他类型的worker:
l 在不同的windows(例如IFrames)运行的多个脚本可以使用共享workers,只要它们和workder同源就可以。共享workers比专用workers略复杂——脚本必须通过一个活动的端口来通信。预知详情请看《SharedWorker》https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker
l ServiceWorkders本质上是作为web应用间的代理服务,如果可能的话,作为浏览器和网络。ServiceWorkers(除其他事情外)致力于创造有效的离线操作,拦截网络请求,基于网络是否可用和服务器上更新过的资源进行适当的操作。ServiceWorkers也可以推送通知和后台同步API。