H5中的web worker示例demo分析
web worker 是运行在后台的 JavaScript，不会影响页面的性能。
什么是 Web Worker？
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
浏览器支持
所有主流浏览器均支持 web worker，除了 Internet Explorer。
使用前先检测是否支持web worker
if(typeof(Worker)!=="undefined")
{
// Yes! Web worker support!
// Some code.....
}
else
{
// Sorry! No Web Worker support..
}
先创建一个js文件，命名为‘demo_workers.js’ ，代码如下。其实本质上是一个延迟的递归函数。每隔1s调用自己，i+1.
var i=0;
function timedCount(){
i=i+1;
console.log(i)
postMessage(i);//向其他窗口或者页面发送消息
setTimeout("timedCount()",1000);
}
timedCount();
然后在同级下，新建个html文件
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
<body>
<p>计数器: <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"){//判断Worker api 支持否
if(typeof(w)=="undefined"){//w变量必须是未定义过的，重复点击对消息的接收并不会产生影响，即使你手速再快。
w=new Worker("demo_workers.js"); //创建worker对象 括号内填url
//注意文件引入路径，如果是在同级文件js文件夹里，则 w=new Worker("./js/demo_workers.js");
}
w.onmessage = function (event){//html5提供的postMessage和onMessage这一对方法来在不同的文档页或者不同的工作线程之间进行通信。onmessage作用是接收消息
document.getElementById("result").innerHTML=event.data;//event为对应的事件，postMessage发送出来的i值在该对象的data属性中。
console.log('触发w')
};
}else{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}
function stopWorker(){
w.terminate();//终止接收，此时js文件中的i值就卡在了如下图的13，断开接收它就自动暂停执行timeCount，停止该JS文件内的线程。然后下次再重新计数时，引入文件i又重置为0.
}
</script>
</body>
</html>
上右侧图，可以看出，每次postMessage发送消息过来，w都会去时时监听该消息。
执行效果如下：从右边可以看出，当点击停止计数时，js文件内部的timeCount函数也会停止计数的。即停止了消息接受后，消息源也会停止执行。
H5中的web worker示例demo分析的更多相关文章
- HTML5中的Web Worker技术
为了让后台程序更好的执行,在HTML5中设计了Web Worker技术.Web Worker的产生主要是考虑到在HTML4中JavaScript Web程序都是以单线程的方式执行的,一旦前面的脚本花费 ...
- HTML5中的Web Worker
什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面是不可响应的,直到脚本已完成. Web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您 ...
- Dynamics 365 CE的插件/自定义工作流活动中调用Web API示例代码
微软动态CRM专家罗勇 ,回复325或者20190428可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me! 现在Web API越来越流行,有时候为了程序更加健壮,需要在插件 ...
- vue中使用web worker
众所周知,JavaScript是单线程的,一些复杂比较耗时的操作,会阻塞页面的渲染交互,引起页面卡顿,影响用户体验.web worker是html5的新特性之一,主要就是用来解决此类问题,为页面额外开 ...
- H5中使用Web Storage来存储结构化数据
在上一篇对Web Storage的介绍中,可以看到,使用Storage保存key—value对时,key.value只能是字符串,这对于简单的数据来说已经够了,但是如果需要保存更复杂的数据,比如保存类 ...
- 进程，线程，Event Loop(事件循环)，Web Worker
线程,是程序执行流的最小单位.线程可与同属一个进程的其他线程共享所拥有的全部资源,同一进程中的多个线程之间可以并发执行.线程有就绪,阻塞,运行三种基本状态. 阮一峰大神针对进程和线程的类比,很是形象: ...
- 【转向Javascript系列】深入理解Web Worker
本文首发在alloyteam团队博客,链接地址http://www.alloyteam.com/2015/11/deep-in-web-worker/ 上一篇文章<从setTimeout说事件循 ...
- 深入HTML5 Web Worker应用实践：多线程编程
HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...
- html5之web worker
Web Worker 在本文中 与 Web Worker 进行双向通信 WindowTimers 在 IE10 Platform Preview 4 中对 Web Worker 的更新 API 参 ...
随机推荐
- wordpess关闭评论的方法，wordpress开发
由于某种原因,需要把wordpress的评论关闭,下面讲一下方法. 在wordpress模板中,找到文章模板页面文件single.php,在里面找到 <?php comments_templat ...
- Intellij 解除（去除）SVN关联
方法一:通过Intellj 来处理 1. 安装插件 打开Intellij的setting(ctrl+alt+s),选择plugins,在右边搜索框输入"SVN",搜索.选择&quo ...
- 浅析JavaScript的字符串查找函数：indexOf和search
语法 ①indexOf:方法可返回某个指定的字符串值在长字符串中首次出现的位置.如果被查找字符串没有找到,返回-1. indexOf 说明:该方法将从头到尾地检索字符串 stringObject,看它 ...
- 教程:安装禅道zentao项目管理软件github上的开发版
该文章转自:吕滔博客 直接从github拉下来的禅道的源码,是跑不起来的.除非你按我的教程来做...哈哈哈(不要脸)~~~~ 禅道官网提供的版本包是带了有安装文件,并有打包合成一些css.js文件的. ...
- 智能合约语言 Solidity 教程系列5 - 数组介绍
写在前面 Solidity 是以太坊智能合约编程语言,阅读本文前,你应该对以太坊.智能合约有所了解, 如果你还不了解,建议你先看以太坊是什么 本文前半部分是参考Solidity官方文档(当前最新版本: ...
- java8 新特性入门 stream/lambda
Java 8 中的 Stream 是对集合(Collection)对象功能的增强,它专注于对集合对象进行各种非常便利.高效的聚合操作(aggregate operation),或者大批量数据操作 (b ...
- bzoj 2002 HNOI 2010 弹飞绵羊
Description 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上n个装置,每个装置 ...
- 记vue API 知识点
1. v-cloak指令:这个指令保持在元素上直到关联实例结束编译.和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标 ...
- Linux程序包管理rpm与yum
Linux程序包管理 Linux中软件的安装主要有两种形式:一种是直接下载源代码包自行编译后安装,另一种直接获取rpm软件包进行安装. 程序的组成部分: 二进制程序:程序的主体文件,比如我们运行一个l ...
- [总结]-2018 w1
不想总结 2017,过去的就过去吧,不过自己在 2017 年还是收获了很多,最重要的就是赚钱.赚钱还是需要两把刷子,所以,2018 的小目标就是学习数据分析和机器学习.希望自己在这两个领域能搞点事情. ...