咱们一起来聊一聊HTML基础_14

HTML Web Workers

Web worker 是运行在后台的 JavaScript，不会影响页面的性能。

什么是 Web Worker？

当在 HTML 页面中执行脚本时，页面是不可响应的，直到脚本已完成。

Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。
您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 运行在后台。

检测 Web Worker 支持

在创建 web worker 之前，请检测用户浏览器是否支持它：

 if (typeof(Worker) !== "undefined") {
        // 是的！支持 Web worker！
        // 一些代码.....
    } else {
        // 抱歉！不支持 Web Worker！
    }

创建 Web Worker 文件

现在，让我们在一个外部 JavaScript 文件中创建我们的 web worker。

在此处，我们创建了计数脚本。该脚本存储于 “demo_workers.js” 文件中：

var i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();

以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。

注释: web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。

创建 Web Worker 对象

现在我们已经有了 web worker 文件，我们需要从 HTML 页面调用它。

下面的代码行检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 “demo_workers.js” 中的代码：

  if (typeof(w) == "undefined") {
        w = new Worker("demo_workers.js");
    }
    然后我们就可以从 web worker 发生和接收消息了。
    向 web worker 添加一个 "onmessage" 事件监听器：
    w.onmessage = function(event){
        document.getElementById("result").innerHTML = event.data;
    };

当 web worker 传送消息时，会执行事件监听器中的代码。
来自 web worker 的数据会存储于 event.data 中。

 if (typeof(w) == "undefined") {
        w = new Worker("demo_workers.js");
    }

然后我们就可以从 web worker 发生和接收消息了。
向 web worker 添加一个 “onmessage” 事件监听器：

   w.onmessage = function(event){
        document.getElementById("result").innerHTML = event.data;
    };

当 web worker 传送消息时，会执行事件监听器中的代码。来自 web worker 的数据会存储于 event.data 中。

终止 Web Worker

• 当创建 web worker 后，它会继续监听消息（即使在外部脚本完成后）直到其被终止为止。
• 如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

 w.terminate();

复用 Web Worker

如果您把 worker 变量设置为 undefined，在其被终止后，可以重复使用该代码：

w = undefined;

Web Worker 和 DOM

由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

• window 对象
• document 对象
• parent 对象

HTML Server-Sent 事件

Server-Sent 事件允许网页从服务器获得更新。
Server-Sent 事件 - One Way Messaging

Server-Sent 事件指的是网页自动从服务器获得更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。
通过 Server-Sent 事件，更新能够自动到达。

例如：Facebook/Twitter 更新、股价更新、新的博文、赛事结果，等等。

接收 Server-Sent 事件通知

EventSource 对象用于接收服务器发送事件通知：

实例

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "
";
};

例子解释：

创建一个新的 EventSource 对象，
然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）

每当接收到一次更新，就会发生 onmessage 事件
当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中

检测 Server-Sent 事件支持

在 TIY 实例中，我们编写了一段额外的代码来检测服务器发送事件的浏览器支持：

if(typeof(EventSource) !== "undefined") {
    // 是的！支持服务器发送事件！
    // 一些代码.....
} else {
    // 抱歉！不支持服务器发送事件！
}

服务器端代码实例

为了使上例运行，您需要能够发送数据更新的服务器（比如 PHP 或 ASP）。

服务器端事件流的语法非常简单。请把 “Content-Type” 报头设置为 “text/event-stream”。现在，您可以开始发送事件流了。

PHP 中的代码 (demo_sse.php)：

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

ASP 中的代码 (VB) (demo_sse.asp)：

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

代码解释：

• 把报头 “Content-Type” 设置为 “text/event-stream”
• 规定不对页面进行缓存
• 输出要发送的日期（始终以 "data: " 开头）
• 向网页刷新输出数据

EventSource 对象

在上例中，我们使用 onmessage 事件来获取消息。不过还可以使用其他事件：

事件	描述
onopen	当通往服务器的连接被打开
onmessage	当接收到消息
onerror	当发生错误