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

HTML5 Web Workers

HTML5 Web Workers web worker 是运行在后台的 JavaScript,不会影响页面的性能。 什么是 Web Worker? 当在 HTML 页面中执...

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

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

HTML5-Web Workers

问题:长时间运行的JavaScript进程会导致浏览器冻结用户界面,让用户感觉屏幕“冻结”了。解决:使用Web Workers,浏览器实现Web Workers 规范的方式有很多种,可以使用线程、后台...

HTML5 Web Workers

1、HTML5 Web Workers   web worker 是运行在后台的 JavaScript,不会影响页面的性能。 2、什么是 Web Worker?   当在 HTML 页面中执行脚本时,...

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...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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