HTML5 Web Workers

原创 2016年06月01日 18:55:20

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();
版权声明:本文为博主原创文章,未经博主允许不得转载。

HTML5 Web Workers

  • 2013年03月20日 18:19
  • 50KB
  • 下载

Html5之web workers多线程

Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。 1、首先看一个实例: 1)js文件...

HTML5 --Web Workers

Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。一:如何使用WorkerWeb Work...

html5 web workers --javascript 中多线程

原文地址:http://blog.jobbole.com/30592/ Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web ...

HTML5-Web Workers实现多线程

HTML5-Web Workers实现多线程当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。虽然在JavaScript中有setInterval和setTimeout函数使j...

HTML5知识填坑(五)——Web Workers

我们知道,js是单线程的,并且和渲染线程是互斥的。也就是说,在浏览器中,执行js代码和渲染页面不能同时进行。这种机制会造成这样一种情况,如果我们的js代码运行的时间过长,这样UI更新就没有时间进行,就...

HTML5——应用缓存与Web Workers

1、应用缓存 (1)什么是应用程序缓存: HTML5引入了应用程序缓存,这意味着web应用可进行缓存,并可在没有因特网链接时进行访问 (2)应用缓存的优势: a:离线浏览-用户可在应用离线...

HTML5 Web Workers

web worker 是运行在后台的javascript,不会影响页面的性能 当在HTML页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。 web worker是运行在后台的javasc...

HTML5 Web Workers之网站也能多线程的实现

Web Workers 是在HTML5中新增的,用来在web应用程序中实现后台处理的一种技术 在HTML4中,js创建的程序都是单线程的,如果花费时间比较长的话web界面就会长时间没有响应,最恶...

HTML5-Web Workers

问题:长时间运行的JavaScript进程会导致浏览器冻结用户界面,让用户感觉屏幕“冻结”了。解决:使用Web Workers,浏览器实现Web Workers 规范的方式有很多种,可以使用线程、后台...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5 Web Workers
举报原因:
原因补充:

(最多只允许输入30个字)