HTML5学习(十)---Web Workers
参考教程：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的更多相关文章
- HTML5中的Web Workers
https://www.cnblogs.com/yanan-boke/p/6954390.html https://segmentfault.com/a/1190000014938305 HTML5 ...
- JavaScript 学习笔记 - Web Workers
前言 本文仅是 Web Workers 的入门科普文章,不涉及太琐碎的知识点. 我们知道,在 Web Workers 出来之前,JavaScript 是单线程的.即使是 setTimeout 之类的看 ...
- HTML5新特性 Web Workers 实现多线程
引子:(JS单线程) 什么是webworker? Web Worker为Web应用程序提供了一种能在后台中运行的方法.通过Web Worker可以生成多个线程同时运行,并保证页面对用户的及时响应,完全 ...
- HTML5学习笔记 Web存储
HTML5 web存储,一个比cookie更好的本地存储方式. 什么是html5 Web存储 使用HTML5可以在本地存储用户的浏览器数据. 早些时候,本地存储使用的是cookies.但是Web存储需 ...
- HTML5学习(八)----Web存储
参考地址:http://www.w3school.com.cn/html5/html_5_webstorage.asp 在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localS ...
- HTML5学习之Web存储
在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前, ...
- HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是c ...
- html5 Web Workers
虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaSc ...
- 【HTML5】Web Workers
什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性 ...
随机推荐
- node.js:怎样同时执行多条SQLs,且只有一个回调
本文主要介绍开源node.js库mysql-queries,其可以同时执行多条SQLs,且只有一个回调.同时抛砖引玉,与大家交流node.js开发经验. node.js很大的特点就是事件驱动.非阻塞和 ...
- 布局—column（属性）
column-width:||用来定义多列中每列的宽度,用像素表示column-count:||用来定义多列中的列数,用数字来表示1-10columns: 200px 2||列宽和列数column-g ...
- Popup window
function createLoadingDialog() { $("#loadingDialog").dialog({ autoOpen: false, closeOnEsca ...
- 用AJAX自定义日历
需求分析 在一些购物网站中,都会有促销活动,这些活动都在日历上标注出来,如何通过Ajax让日历 通过读取数据库中的信息,正确的把促销活动标注在日历上,本文通过自定义日历来实现这 个问题. 技术难点 日 ...
- thinkphp 使用过程中遇到的一个小函数
1.实现导出Excel文件,并在导出的文件中显示图片 //导出 public function push(){ $goods_list=M('Dajia')->select(); $data = ...
- 格式化说明符定义、转义字符、枚举、结构体、typedef
1.格式化说明符定义: %i,%d:输出十进制整型数 %6d:输出十进制整型数,至少6个字符宽 %li,%ld:输出长整数 %u:输出无符号整数 %lu:输出无符号长整数(相当于:unsigned l ...
- Raft、Zab
Raft.Zab 引言 <分布式系统理论进阶 - Paxos>介绍了一致性协议Paxos,今天我们来学习另外两个常见的一致性协议--Raft和Zab.通过与Paxos对比,了解Raft和Z ...
- Java调用SQLCMD遇到的问题
今天用Java调用SQLCMD命令时,一直提示找不到SQLCMD命令,但是通过CMD命令确可以使用,因为我的sqlcmd是新安装的,所以重新配置了新的path路径,而cmd可以调用是因为重新开一个cm ...
- 5.3:从bean的实例中获取对象
5.3 从bean的实例中获取对象 在getBean方法中,getObjectForBeanInstance是个高频率使用的方法,无论是从缓存中获得bean还是根据不同的scope策略加载bean. ...
- linux 下安装JDK1.7
安装JDK1.7 1. 打开网址http://www.oracle.com/technetwork/java/javase/downloads/jdk-7u5-downloads-1591156.ht ...