参考教程：http://www.w3school.com.cn/html5/html_5_webworkers.asp

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

什么是 Web Worker？

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

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

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

完整代码
<!DOCTYPE html>

<html>

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

}

</script>

</body>

</html>




												


											
HTML5学习(十)---Web Workers的更多相关文章
	

    
								
  1. HTML5中的Web Workers
		
    https://www.cnblogs.com/yanan-boke/p/6954390.html https://segmentfault.com/a/1190000014938305 HTML5  ...
    
		
    2. 
						
  2. JavaScript 学习笔记 - Web Workers
		
    前言 本文仅是 Web Workers 的入门科普文章,不涉及太琐碎的知识点. 我们知道,在 Web Workers 出来之前,JavaScript 是单线程的.即使是 setTimeout 之类的看 ...
    
		
    3. 
						
  3. HTML5新特性  Web Workers 实现多线程
		
    引子:(JS单线程) 什么是webworker? Web Worker为Web应用程序提供了一种能在后台中运行的方法.通过Web Worker可以生成多个线程同时运行,并保证页面对用户的及时响应,完全 ...
    
		
    4. 
						
  4. HTML5学习笔记 Web存储
		
    HTML5 web存储,一个比cookie更好的本地存储方式. 什么是html5 Web存储 使用HTML5可以在本地存储用户的浏览器数据. 早些时候,本地存储使用的是cookies.但是Web存储需 ...
    
		
    5. 
						
  5. HTML5学习(八)----Web存储
		
    参考地址:http://www.w3school.com.cn/html5/html_5_webstorage.asp 在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localS ...
    
		
    6. 
						
  6. HTML5学习之Web存储
		
    在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前, ...
    
		
    7. 
						
  7. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)
		
    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...
    
		
    8. 
						
  8. html5 Web Workers
		
    虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaSc ...
    
		
    9. 
						
  9. 【HTML5】Web Workers
		
    什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. C#委托的异步调用1
			
    本文将主要通过“同步调用”.“异步调用”.“异步回调”三个示例来讲解在用委托执行同一个“加法类”的时候的的区别和利弊. 首先,通过代码定义一个委托和下面三个示例将要调用的方法: /*添加的命名空间 u ...
    
			
    2. 
						
  2. [DevExpress]ChartControl之饼状图百分比示例
			
    关键代码: using System; using System.Data; using System.Windows.Forms; using DevExpress.XtraCharts; name ...
    
			
    3. 
						
  3. mysql实例---sql语句中使用@变量
			
    本文介绍下,在mysql语句中使用@变量的一个例子,学习下这个特殊变量的用法,有需要的朋友参考下吧. 要求: 计算用户距上次访问的天数,根据imei号区分不同的用户,如果时间段内只有一次访问则为0.  ...
    
			
    4. 
						
  4. oracle中的decode的使用
			
    含义解释:decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) 该函数的含义如下:IF 条件=值1 THEN RETURN(翻译值1)ELSIF 条件=值2 THEN R ...
    
			
    5. 
						
  5. 阶段性放弃 wxPython 前的总结
			
    为了实现一个管理本地电子书的程序,搞了一段时间 GUI,使用 wxPython. 实在难以适应和习惯,也搞不出什么太好看的效果. 最不能忍受的是,多线程处理能力太弱.遂决定放弃 GUI. 放弃之前,整 ...
    
			
    6. 
						
  6. 移植openssl
			
    1.官网(ftp://ftp.openssl.org/source/old/0.9.x/)下载openssl-0.9.8k.tar.gz2.交叉编译openssl CC=arm-hisiv400-li ...
    
			
    7. 
						
  7. python学习笔记13（模块、包）
			
    在Python中有一个概念叫做模块(module),比如在Python中要调用sqrt函数,必须用import关键字引入math这个模块,下面就来了解一下Python中的模块. 模块文件以.py后缀结 ...
    
			
    8. 
						
  8. 第一次写python
			
    这是一个在BJDP上学习Coding Kata的时候用到的一个练习,原来打算用Java写的,但是一想正好是学习的好机会. 就用Python了.第一次,写的有些复杂. 这个题目是关于购买图书的打折信息的 ...
    
			
    9. 
						
  9. 使用Yeoman搭建 AngularJS 应用 (8) —— 让我们搭建一个网页应用
			
    原文地址:http://yeoman.io/codelab/write-app.html 创建一个新的模板来显示一个todo的列表 打开views/main.html 为了从一个干净的模板开始,删除m ...
    
			
    10. 
						
  10. 1060: [ZJOI2007]时态同步 - BZOJ
			
    Description小Q在电子工艺实习课上学习焊接电路板.一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数字1,2,3….进行标号.电路板的各个节点由若干不相交的导线相连接,且对于电路板的 ...
    
			
    11.