HTML5_Web Workers

最新推荐文章于 2024-10-19 19:48:37 发布

时间解

最新推荐文章于 2024-10-19 19:48:37 发布

阅读量388

点赞数

分类专栏： HTML 文章标签： html5 worker postMessag onmessage

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

HTML5 Web Worker

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
注释：web worker 通常不用于简单的脚本，而是用于更耗费 CPU 资源的任务。

在一个页面不断刷新一个区域计数

<!DOCTYPE html>
<html>
<body>

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

<script>
var w;

function startWorker()
{
    if(typeof(Worker)!=="undefined")    /* 判断浏览器是否支持Web Worker */
    {
        if(typeof(w)=="undefined")
        {
            w=new Worker("http://www.w3school.com.cn/example/html5/demo_workers.js");  /* 通过js文件创建一个Worker */
        }

        w.onmessage = function (event)   /* 响应js脚本中的postMessage()消息 */
        {
            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>

demo_workers.js的脚本代码如下：

var i=0;

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

timedCount();

Web Workers和DOM

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

window 对象
document 对象
parent 对象

更多请参考：W3School

时间解

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录