HTML 5 基础教程

HTML是超文本标记语言，是一种专门用来制作网页的语言，而HTML5就是它的第五个版本，2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成，该标准针对当前互联网的飞速发展制定了更加标准的网页语言规范及适用功能，同时也给我们开发者带来了更多的开发选择，学习它是每个前端开发者必修的课程。

W3CAPI

2020-06-15 06:59:35

文档目录

我的书签

Loading ...

请登录

HTML5 Web Workers 使用方法

我们针对复杂的功能都有一个使用方法的说明，通过使用步骤的说明让我们可以清楚的了解一个新功能的应用逻辑和生命周期，如下为使用Web Workers 的代码步骤：

检测浏览器对 Web Worker 支持：在创建 web worker 之前，请检测用户的浏览器是否支持它
创建单独的 Web Worker 文件：我们需要创建一个外部 JavaScript 文件：test_worders.js，来实现 web worker 异步处理
在创建的 Web Worker 文件 test_worders.js 中实现异步处理代码逻辑并通过 postMessage方法来进行异步消息的回传：这里实现一个异步计数（web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务）的功能，代码如下：
```
var i=0;
function timedCount() {
    i=i+1;
    postMessage(i); //它用于向 HTML 页面传回一段消息
    setTimeout("timedCount()",500);
}
timedCount();
```
创建 Web Worker 对象：我们已经创建了外部的 web worker 文件，现在我们需要从 HTML 页面调用它。下面代码检测是否存在 worker，如果不存在，它会创建一个新的 web worker 对象，然后运行 "test_workers.js" 中的代码：
```
if(typeof(w)=="undefined") {
    w=new Worker("test_workers.js");
}
```

使用 Web Worker 对象的 onmessage方法来开启异步消息的监听：如下代码实现对 test_workers.js 中异步处理的消息进行监听和接收：

w.onmessage=function(event){
    //当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。
    document.getElementById("result").innerHTML=event.data;
};

终止 Web Worker：当我们创建 web worker 对象后，它会持续监听异步消息（即使在外部脚本完成之后）直到其被终止为止。如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：
```
w.terminate();
```

作者文档