Html5 Web Workers

分享到:

web worker 是运行在后台的 JavaScript,不会影响页面的性能。

什么是 Web Worker?

当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。

web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。

浏览器支持

所有主流浏览器均支持 web worker,除了 Internet Explorer。

HTML5 Web Workers 实例

下面的例子创建了一个简单的 web worker,在后台计数:
var w; function startWorker() { if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("../example/html5/demo_workers.js"/*tpa=http://www.jb51.net/example/html5/demo_workers.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(); }

检测 Web Worker 支持

在创建 web worker 之前,请检测用户的浏览器是否支持它:

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

创建 web worker 文件

现在,让我们在一个外部 JavaScript 中创建我们的 web worker。

在这里,我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中:

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

以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。

注释:web worker 通常不用于如此简单的脚本,而是用于更耗费 CPU 资源的任务。

创建 Web Worker 对象

我们已经有了 web worker 文件,现在我们需要从 HTML 页面调用它。

下面的代码检测是否存在 worker,如果不存在,- 它会创建一个新的 web worker 对象,然后运行 "demo_workers.js" 中的代码:

if(typeof(w)=="undefined")    {    w=new Worker("demo_workers.js");    }  

然后我们就可以从 web worker 发生和接收消息了。

向 web worker 添加一个 "onmessage" 事件监听器:

w.onmessage=function(event){  document.getElementById("result").innerHTML=event.data;  };  

当 web worker 传递消息时,会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。

终止 Web Worker

当我们创建 web worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。

如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法:

w.terminate();

完整的 Web Worker 实例代码

我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码:

实例

<!DOCTYPE html>  <html>  <body>    <p>Count numbers: <output id="result"></output></p>  <button onclick="startWorker()">Start Worker</button>  <button onclick="stopWorker()">Stop Worker</button>  <br /><br />    <script>  var w;    function startWorker()  {  if(typeof(Worker)!=="undefined")  {    if(typeof(w)=="undefined")      {      w=new Worker("demo_workers.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>  

Web Workers 和 DOM

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

  • window 对象
  • document 对象
  • parent 对象
昵    称:
验证码:

相关文档:

  • html5(五)拖放
    http://www.w3school.com.cn/html5/html_5_draganddrop.asp http://www.cnblogs.com/return-false/p/3326282.html...
  • HTML5/HTML
    (文章还在修改完善中,文中只整理出了部分标签)需要的可以参考下: html的meta标签描述的头部信息特别多,有针对的SEO的头部信息,...
  • 自绘制HT For Web ComboBox下拉框组件
    传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HTforWeb通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框...
  • 10+ Best Responsive HTML5 AngularJS Templates
    http://www.responsivemiracle.com/collective/best-responsive-html5-angularjs-templates/...
  • HTML5 PACS 医学成像
    http://ivmartel.github.io/dwv/ http://oviyam.raster.in/oviyam2.html https://github.com/ivmartel/dwv https://github.com/ivmartel/dbv http://www.medicor...
  • HTML5 postMessage 和 onmessage API 详细应用
    原文地址:http://www.ibm.com/developerworks/cn/web/1301_jiangjj_html5message/ WebWorkers WebWorkers简介 至2008年W3C制定出第一个HTML5草案开始,HTML5承载了越...
  • html5 canvas 鼠标绘制
    <!doctypehtml> <html> <head> <metacharset="utf-8"> <title>无标题文档</title> <style> body{ background:pink; } #c...
  • 基于html5 canvas和js实现的水果忍者网页版
    今天爱编程小编给大家分享一款基于html5canvas和js实现的水果忍者网页版。《水果忍者》是一款非常受喜欢的手机游戏,刚看到新闻说《...
  • Html5实践之EventSource
    最近尝试了一下服务器端的推送,之前的做法都是客户端轮询,定时向服务器发送请求。但这造成了我的一些困扰: 1:轮询是由客户端...
  • html5+css3学习笔记音频和视频
    格式IEFirefoxOperaChromeSafari Ogg No 3.5+ 10.5+ 5.0+ No MPEG4 9.0+ No No 5.0+ 3.0+ WebM No 4.0+ 10.6+ 6.0+ No Ogg=带有Theora视频编码和Vorbis音频编码的Ogg...
  • Html5新的表单元素
    HTML5 的新增了几个表单元素,HTML5拥有若干涉及表单的元素和属性。本章介绍以下新的表单元素:datalist,keygen,output...
  • HTML5小時鐘
    <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <metahttp-equiv="C...
  • html5 进度条上传文件
    [html]viewplaincopyprint?...
  • 使用Httpclient来替代客户端的jsonp跨域解决方案
    最近接手一个项目,新项目需要调用老项目的接口,但是老项目和新项目不再同一个域名下,所以必须进行跨域调用了,但是老项目又不...
  • html5 中meta中 content=width=device-width注意
    <!DOCTYPEhtml> <html> <head> <metahttp-equiv="content-type"content="text/html;charset=UTF-8"> <metaname="viewport"content="...
  • Web 通信 之 长连接、长轮询(long polling) BY:hoojo
    基于HTTP的长连接,是一种通过长轮询方式实现"服务器推"的技术,它弥补了HTTP简单的请求应答模式的不足,极大地增强了程序的实时性和交...
  • html script的async属性
    一般网页加载的script标签时,没有带async属性,浏览器渲染时会从上至下依次进行,当某一个script解析缓慢会影响后续的网页的渲染,在h...
  • jQuery HighchartsTableHTML表格转Highcharts图表插件
    版权申明jQueryHighchartsTable由PMSIpilot创建,中文使用文档由Highcharts中文网发布本文由Theo、红烧鸡翅膀、Mr.Zhang翻译整理,版权归Highcharts中...
  • html5 canvas 五子棋游戏
    <!doctypehtml> <html> <head> <metacharset="utf-8"> <title>五子棋</title> <styletype="text/css"> *{ margi...
  • HTML5新特性学习-1
    本文在于巩固基础 新特性:音频的使用 <!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title>播放音乐</title> &...