关闭

HTML5 Web Workers

标签: html5
306人阅读 评论(0) 收藏 举报
分类:

Web Workers 介绍

要将有趣的应用(例如从侧重服务器端的实施)移植到客户端 JavaScript,存在很多制约瓶颈。其中包括浏览器兼容性、静态类型、可访问性和性能。幸运的是,随着浏览器供应商快速提高 JavaScript 引擎的速度,性能已不再是瓶颈。

仍在阻碍 JavaScript 的实际上是语言本身。JavaScript 属于单线程环境,也就是说无法同时运行多个脚本。这种局限如果出现持续时间较长的计算不但UI线程会阻塞导致无法在文本框中输入文本、单击按钮
使用css效果,而且无法打开新标签。

HTML5 Web Workers来了,支持多线程,让Web应用程序具备后台处理能力,充分利用多核CPU带来的优势,将耗时长的任务给HTML5 Web Workers执行,可以避免弹出脚本执行缓慢的警告,如下图

这里写图片描述

尽管Web Workers功能强大而且大多数浏览器都支持了,但是Web Workers的执行脚本不能访问页面的windows对象(windows.document)。

使用Web Workers API

浏览器支持性检查

具体代码如下:

if(typeof(Worker)!=="undefined")
  {
  // Yes! Web worker support!
  // Some code.....
  }
else
  {
  // Sorry! No Web Worker support..
  }

调用typeof(Worker)会返回全局window对象的worker属性,如果浏览器不支持Web Workers API,返回结果是“undefined”。

创建Web Workets

Web Workets初始化时会接受一个JavaScript文件的URL地址,里面包含了供Worket执行的代码的代码。这段代码会设置事件监听器,并与生成的容器进行通信。JavaScript文件的URL可以是相对或者绝对的,只要是同源(相同的协议、主机和端口)即可:

worker=new Worker("whf.js");

多个javaScript文件的加载与执行

由于Web Workers没有访问document对象的权限,可以通过importScripts()导入javaScript文件:

importScripts(“whf.js”);

多个的话可以这样:importScripts(“whf.js”,“wf.js”);

与HTML5 Web Workers通信

Web Workers一旦生成,就可以使用postMessage API传送和接收数据。postMessage API支持跨框架和跨窗口通信。大多数javaScript对象都可以通过postMessage发送,但含有循环引用的除外。

为了能与Web Workers成功通信,除了要在主页中添加代码外,Web javaScript也要添加相应代码。

示例代码

主页代码

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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")
        {
            if(typeof(w)=="undefined")
            {
                w=new Worker("js/echoWorker.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();
1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:99031次
    • 积分:1310
    • 等级:
    • 排名:千里之外
    • 原创:57篇
    • 转载:9篇
    • 译文:0篇
    • 评论:39条
    最新评论