Web Worker的好处

和C++(版本>=11)以及Go这些系统级措辞内置支持多线程并行打算不同,网页JavaScript脚本只支持单线程,如果在HTML页面中实行脚本,那么该页面将不能响运用户交互,直到脚本实行完成。
那么如果不幸该脚本在等待某个网络数据包或者正在实行一个大的循环处理,页面就将处于僵去世状态。

Web Workers 是HTML5供应的一个JavaScript多线程办理方案。
通过利用Web worker,实行任务交付给浏览器在后台默默运行,而不会影响当前页面的性能,用户可以连续任何其他操作,这将大大提升用户体验。

浏览器支持

下面表格中的数字表示最早支持的版本号:

html5多页面五步告知你若何应用Web Workers及JavaScript实现HTML5页面的多线程义务 NoSQL

利用示例

下面的例子演示了一个计数的网页事情线程:

Step 1: 检讨浏览器支持

并非所有浏览器都支持该API,因此在创建Web worker之前,我们须要先检测该特性是否被用户浏览器所支持:

Step 2: 创建一个Web Worker文件

我们新建一个外部JavaScript文件,文件名为\"大众demo_workers.js\公众代码如下(大略的计数):

上述代码中的postMessage方法很主要,依赖于该方法,事情线程才能和HTML页面(用户界面)之间通信,该方法发送一个回给页面。

Step 3:创建一个Web Worker工具

我们已经有了上述的web worker文件,现在我们须要从HTML页面调用它。
下面这行代码检讨worker是否已存在,如果不存在,则创建一个新的Web Worker工具,并运行\"大众demo_workers.js\"大众文件中的代码:

然后我们可以在Web worker中发送和吸收。
我们给该Web worker添加一个\"大众onmessage\"大众事宜侦听器。

当web worker发回一个时,页面事宜侦听器中的代码被实行。
web worker发回的数据被保存在event.data中。

Step 4:终止Web Worker

当一个Web worker工具被创建后,它将持续侦听(纵然外部脚本已经实行完成),除非被终止。
要终止一个web worker,开释干系的浏览器/打算机资源,利用 terminate() 方法:

w.terminate();

Step 5:重用Web Worker

如果您在worker被终止后,将worker变量设置为未定义(undefined),就可以被重用:

w = undefined;

完全的示例代码

Web worker的代码在外部.js文件中,HTML页面的代码如下:

Demo源码可访问:http://www.ikinsoft.com/3ddemo/webWork.html