在html5中,多线程worker和异步ajax有什么区别

在html5中,多线程worker和异步ajax有什么区别,第1张

线程是属于并发范畴,而异步是数据请求方式的范畴,与同步相对。从具体使用场景来说,耗CPU的任务可以移到worker中处理,ajax主要是IO费时间,为了保证不让代码阻塞,所以异步处理,等数据到达时再通知程序。这是在html5中的变通方法,因为ajax是比较早实现的,而worker是比较新的一个概念,可以说worker的功能是覆盖ajax的,只是由于HTML的不断发展自然出现了这样的问题。

在其它语言中,一般费时任务都放在其它线程中,以避免阻塞主线程。而不管它是费CPU还是费IO。

总之,这都是HTML的错。你大可以把网络请求也放在worker中处理,但不幸的是,支持worker的浏览器并不多。

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的名称。如:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6998183.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-31
下一篇 2023-03-31

发表评论

登录后才能评论

评论列表(0条)

保存