HTML5 web workers

最新推荐文章于 2024-06-01 18:41:06 发布

寒江独

最新推荐文章于 2024-06-01 18:41:06 发布

阅读量321

点赞数

本文链接：https://blog.csdn.net/fandyvon/article/details/88718941

版权

HTML5 web workers

web workers是什么？

webworkers规范定义了在网络应用中生成背景脚本的API。我们可以通过web workers执行一些操作，例如触发长时间运行的脚本以处理计算密集型任务，同时却不会阻碍UI或其他脚本处理用户互动。有助于解决“无响应脚本”的对话框。简单点说就是web workers能够帮助我们优化JS文件，提供网站性能。

###为什么要使用web workers？

如果我们要将代码移植到客户端，存在很多制约瓶颈，比如浏览器兼容性，静态类型，可访问性和性能。我们都知道JS执行代码的时候是单线程的，无法同时运行多个脚本，先执行前面的程序，后执行后面的程序。如果网站比较大，代码较多，需要处理的UI事件，查询并处理大量API数据以及操作DOM的时候，这些操作无法同时进行，只能等待，在速度上就会很卡。体验不友好。系统会在生成当前执行脚本后处理异步事件。好消息是，HTML5 为我们提供了优于这些技巧的技术。使用web workers可以将web应用变为后台管理程序，将单线程变为多线程，处理速度更快。

###web workers的使用

1、新建一个html文件（workers.html）和一个js文件(task.js)。

2、在html文件中，创建一个Workers对象，将JS文件引入

var workers = new Worker(‘task.js’)

Web Worker 在独立线程中运行。因此，它们执行的代码需要保存在一个单独的文件中（比如这里的task.js）。但在保存代码前，我们要先在您的主网页上创建新的 Worker 对象。构造函数采用 Worker 脚本的名称。如果指定的异步下载文件存在，浏览器就会生成新的 Worker 线程。在完全下载并执行文件之前，系统不会生成 Worker。如果指向您 Worker 的路径返回 404，Worker 就会在不显示任何提示的情况下失败。

3、调用postMessage()方法

workers.postMessage(‘Hello’) Worker 与其父网页之间的通信是通过事件模型和 postMessage() 方法实现的。使用postMessage()传输数据，括号内输入信息。postMessage() 可以接受字符串或 JSON 对象作为单个参数，具体取决于您的浏览器/版本。新式浏览器的最新版支持传递 JSON 对象。上例中传入了一个字符串Hello。这个字符串将在操作后输出

4、在JS文件（task.js）中接收对象，获取信息

在js文件中使用web workers的语法self，这个self就是html文件中的workers对象。 self.onmessage=function(ev){}

5、在js文件中执行信息

self.postMessage(ev.data) 这个ev.data就是html文件中postMessage()传过来的信息。task.js代码最后就是： self.onmessage=function(ev){ self.postMessage(ev.data) }

6、在html中定义 message 事件的 onmessage 处理程序来处理消息

workers.onmessage=function(ev){ alert(ev.data) } web workers需要在有服务器环境下运行。以上6步就是简单的一个workers的运行步骤。

停止workers的方法

在主网页中调用 worker terminate()，或在 Worker 本身内部调用 self.close() web workers适用范围由于 Web Worker 的多线程行为，所以它们只能使用 JavaScript 功能的子集： navigator 对象 location 对象（只读） XMLHttpRequest setTimeout()/clearTimeout() 和 setInterval()/clearInterval() 应用缓存使用 importScripts() 方法导入外部脚本生成其他 Web Worker