web worker是在后台运行的JavaScript,不影响页面的执行.

什么是Web Worker?

在HTML页面里执行脚本时,页面会在执行完脚本后才会响应.

web worker是在后台运行的脚本,和其它脚本是独立的,不会影响页面的执行.当web worker在后台运行时你可以继续做你想做的:单击,选择之类的操作.

HTML Web Workers例子

下面的例子是一个简单的web worker例子,在后台统计数字:

在创建web worker之前,检测用户的浏览器是否支持:

创建一个Web Worker文件

现在,我们在外部JavaScript文件里里创建我们的web worker.

下面,我们创建一个脚本进行统计.脚本写在文件"demo_workers.js"文件里:

上面代码重要的部分是postMessage()方法 - 用来发送一个消息给HTML页面.

注意:通常web workers不用于这么简单的脚本,一般用于更密集的CPU任务.

创建一个Web Worker文件

现在我们有一个web worker文件,我们需要在HTML页面调用它.

下面的代码行用来检测worker是否已经存在,如果不存在 - 它创建一个新的web worker对象并在"demo_workers.js"文件里运行代码：

然后我们可以从web worker发送消息和接收消息.

给web worker添加"onmessage"事件.

当web worker发送了消息,事件监听器里的代码将会执行.web worker里的数据存储在event.data里.

结束Web Worker

当一个web worker对象被创建了,它将持续监听消息(即使外部脚本结束了)直到结束.

用terminate()方法来结束web worker,并释放浏览器或电脑的资源.

重新使用Web Worker

如果你设置了worker变量为undefined,在结束后,你可以重新使用代码:

完整的Web Worker代码例子

我们已经看了.js文件里的Worker代码.下面是HTML页面代码:

Web Workers和DOM

因为web workers在外部文件里,所以不能访问下面的JavaScript对象:

• window object
• document object
• parent object