Html5初学_____（2）

来源：互联网发布：vb 注释符号编辑：程序博客网时间：2024/05/22 00:05

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

创建 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 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。

终止web worker：

创建web worker对象后，会持续监听，指导手动终止

w.terminate();

HTML代码;

<!DOCTYPE html><html><body><p>Count numbers: <output id="result"></output></p><button onclick="startWorker()">Start Worker</button><button onclick="stopWorker()">Stop Worker</button><br /><br /><script>var w;function startWorker(){if(typeof(Worker)!=="undefined"){  if(typeof(w)=="undefined")    {    w=new Worker("demo_workers.js");    }  w.onmessage = function (event) {    document.getElementById("result").innerHTML=event.data;  };}else{document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";}}function stopWorker(){w.terminate();}</script></body></html>

外部js代码：

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

通过worker的方式记载js文件，可以保证js在后台的执行，不会影响到页面的性能.

HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。

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 + "<br />";  };

例子解释：

创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）
每接收到一次更新，就会发生 onmessage 事件
当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中

0 0