HTML5 Web Workers

最新推荐文章于 2025-03-27 05:15:31 发布

qq_23473123

最新推荐文章于 2025-03-27 05:15:31 发布

阅读量728

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Html5 文章标签： html5

本文链接：https://blog.youkuaiyun.com/qq_23473123/article/details/51556084

Html5 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了HTML5 WebWorkers的功能及其实现方式，包括如何解决JavaScript单线程的问题、多线程的支持、创建WebWorkers的方法、与WebWorkers通信的过程以及代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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();