Html5初学_____（2）

最新推荐文章于 2022-04-16 10:46:28 发布

小星_day

最新推荐文章于 2022-04-16 10:46:28 发布

阅读量1k

点赞数

分类专栏： Html5初学

本文链接：https://blog.csdn.net/xingxing1828/article/details/17591573

版权

Html5初学专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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 οnclick="startWorker()">Start Worker</button>
<button οnclick="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" 的元素中

小星_day

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Html5初学_____（2）

web worker是运行在后台的js，不会影响页面的性能。创建 Web Worker 对象我们已经有了 web worker 文件，现在我们需要从 HTML 页面调用它。下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码：if(typeof(w)==
复制链接

扫一扫