HTML 5 基础教程

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

W3CAPI

2020-06-15 06:59:35

文档目录

我的书签

请登录

HTML5 Web Workers 简介

什么是 HTML5 Web Workers？

概念：HTML5 Web Worker 是运行在后台的 JavaScript，不会影响页面的性能，类似于AJAX的异步请求，不会阻塞我们执行其他操作。

如何理解：当我们在 HTML 页面中执行脚本的同时，页面的状态是不可再响应的，除非脚本已经执行完成，才会再次响应我们的操作。Web Worker 是运行在后台的 JavaScript，独立于页面中其他的脚本执行，不会影响页面的整体运行性能。我们可以继续在做：点击、选取内容等等的时候，同一时刻不会影响 Web Worker 在后台独立运行。

特性：

由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：
- window 对象
- document 对象
- parent 对象
支持异步任务处理

为什么需要 HTML5 Web Workers？

当我们在使用 JavaScript脚本来处理某些业务逻辑、数据检测的时候，默认情况下我们是不可以同时再处理其他的业务，也就是不能进行异步任务处理比如：我们要进行数据的实时缓存，规定在10秒内进行一次数据的缓存操作，而且不能阻塞我们对页面的其他操作，这个时候就需要使用到异步处理的功能。

我们在日常开发中经常会对异步任务处理有很多的需求，异步任务应用的最简单业务场景就是消息处理，也就是我们日常使用的聊天软件了，没有异步任务处理，我们不会在同时接收好友消息的时候还可以再给好友发送消息，而这两个操作互不影响；

HTML5 给我们提供了可以实现异步任务处理的功能 Web Workers，这使得我们可以利用 JavaScript 来方便的实现更多业务场景的逻辑了。

HTML5 Web Workers 浏览器兼容

所有主流浏览器均支持 Web Worker，除了 Internet Explorer；Internet Explorer 10+、Firefox、Chrome、Safari 和 Opera 都支持 Web Workers。如下代码检测浏览器是否支持 HTML5 Web Workers：

if(typeof(Worker)!=="undefined") {
    // 您的浏览器支持 Web workers!
    // Some code.....
}  else  {
    // 您的浏览器不支持 Web workers!
}

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();
```

HTML5 Web Workers 实例

一、使用 HTML5 Web Workers 实现异步计数功能

计数功能代码实现，我们可以使用 JavaScript 中的定时器来轻松实现，排除使用定时器的代码实现后，使用 JavaScript 循环来实现此功能，它在运行的时候我们是不能进行其他页面操作的，也就是计数功能一旦运行起来就会阻塞我们对网页页面的其他操作， HTML5 Web Workers 给我们提供了一种更好的异步任务处理的功能，利用它我们可以非常方便的来实现任何耗时的业务逻辑而又不会影响我们去执行其他操作。代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>

<p>计数: <output id="result"></output></p>
<button onclick="startWorker()">开始 Worker</button>
<button onclick="stopWorker()">停止 Worker</button>
<br /><br />

</body>

<script type="text/javascript">

    var w;
    function startWorker()  {

        if( typeof(Worker) !== "undefined" )  {
            if( typeof(w) == "undefined" )  {
                w=new Worker("/static/example/html5/js/test_workers.js");
            }
            w.onmessage = function (event) {
                document.getElementById("result").innerHTML=event.data;
            };
        } else {
            document.getElementById("result").innerHTML="您的浏览器不支持 Web Workers...";
        }
    }

    function stopWorker() {
        w.terminate();
        delete w; //重置对象，还可以继续开始计数
        w = undefined;
    }
</script>

</html>

执行一下

作者文档