HTML 5 之 Web Workers

最新推荐文章于 2021-07-07 10:23:31 发布

雪飞静

最新推荐文章于 2021-07-07 10:23:31 发布

阅读量531

点赞数

分类专栏：【前端】【开发经验】文章标签：性能 html5

本文链接：https://blog.csdn.net/basycia/article/details/50481186

版权

【前端】同时被 2 个专栏收录

66 篇文章 0 订阅

订阅专栏

【开发经验】

61 篇文章 0 订阅

订阅专栏

1 定义

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

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

2 浏览器支持

所有主流浏览器均支持 web worker，除了 Internet Explorer。

3.使用步骤

检测 Web Worker 支持----创建 web worker 文件----创建 Web Worker 对象----终止 Web Worker

4.实例分析

在浏览器内部创建个计数器，不影页面性能

<span style="font-size:18px;"><strong><!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")//</strong></span>检测支持<span style="font-size:18px;"><strong>
{
  if(typeof(w)=="undefined")
    {
    w=new Worker("demo_workers.js");//</strong></span>创建web work,js文件以及new 对象<span style="font-size:18px;"><strong>
    }
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;//</strong></span>向 web worker 添加一个 "onmessage" 事件监听器：<span style="font-size:18px;"><strong>
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
 does not support Web Workers...";
}
}

function stopWorker()
{
w.terminate();//</strong></span>终止<span style="font-size:18px;"><strong>
}
</script>

</body>
</html></strong></span>