HTML5新增的一些属性和功能之八——web Worker
Web Workers
为什么用web workers？
浏览器的原理中决定了页面打开只有一个主线程——UI渲染线程，如果线程中有耗时的程序（js）会阻塞线程，使得页面中其他的UI无法渲染，我们一般把js文件放在body结束之前，或者优化算法复杂度。但是根本上解决还是线程的问题。在HTML5中新增了web Workers的方法，用来解决JavaScript多线程的问题。把一些耗时的程序放在单独的js中，和浏览器的UI渲染线程同步执行。
如何用：
1.首先把需要单独执行的js代码单独放在一个js文件(such as fanfan.js);
onmessage方法接收主线程发送过来的数据
postMessage(data)向主线程发送数据
/**
* Created by fanfan on 2016/11/17.
*/
onmessage=function(e){//onmessage方法接收主线程发送过来的数据
var n= e.data;
n=parseInt(n);
var result =isPrime(n);
postMessage(result);//postMessage(data)向主线程发送数据
}
function isPrime(num){//判断质数的算法
var result = false;
for(vari=2; i<num; i++){
if(num%i===0){
break;
}
}
if(i===num){
result = true; //是质数
}
return result;
}
fanfan.js
2.在使用js文件的HTML页面中调用js文件
①创建一个web worker线程
var w=new Worker(url);
②传递数据给worker
w.postMessage(data);
③接受worker返回的数据
w.onmessage=function(e){
console.log(e.data);
}
④释放web worker占用的资源
w.terminate();
完整代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
border:1px solid #ccc;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h3>判断质数</h3>
<input type="text" id="num"/><button id="btn">开始判断</button>
<div id="r"></div>
<script>
btn.onclick=function() {//btn监听事件
var n=num.value;
var w = new Worker('worker.js');//实例化一个worker对象
w.postMessage(n);//向worker发送数据
w.onmessage=function(e){//获取worker返回的数据
r.innerHTML= e.data;
}
}
</script>
</body>
</html>
index.html
以上事例结果为在html页面输入一个值，然后再worker中判断是否为质数，然后把结果打印在页面上的过程
注意事项：
本地运行index.html文件，在chrome中出现错误（chrome不支持），但是在firefox运行正确。
在web服务器环境下chrome就可以正常运行了。
web worker的跨域访问限制
在index.html中new worker(url)来创建work对象，加载的js文件不能跨域！
局限性：在web worker的js中无法访问index.html中的DOM等，很大局限。所以看情况使用。
HTML5新增的一些属性和功能之八——web Worker的更多相关文章
- HTML5新增的一些属性和功能之一
大致可以分为10个方面: HTML5表单元素和属性 表单2.0 视音频处理 canvas绘图 SVG绘图 地理定位 拖放技术 web work web storage web socket 一.新的i ...
- HTML5新增的一些属性和功能之六——拖拽事件
拖放事件的前提是分为源对象和目标对象,你鼠标拖着的是源对象,你要放置的位置是目标对象,区分这两个对象是因为HTML5的拖放事件对两者是不同的. 被拖动的源对象可以触发的事件: 1).ondragsta ...
- HTML5新增的form属性简介——张鑫旭
一.引言 HTML5中新增了一个名为form的属性,是一个与处理表单相关的元素. 在HTML4或XHTML中,我们要提交一个表单,必须把相关的控件元素都放在<form>元素下.因为表单提交 ...
- HTML5新增标签与属性
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- HTML5新增的表单验证功能
一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...
- html5新增及废除属性
html5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 一.新增属性 1.表单属性 a.autofocus 对input[所有类型].select.textarea与button指定au ...
- HTML5新增input标签属性
一. input type属性 <form action=""> 邮箱<input type="email" name="" ...
- 初学HTML5系列二：HTML5新增的事件属性
Window事件属性: 属性 值 描述 onafterprint script 文档打印之后运行的脚本. 属性发生于用户设置页面打印并且打印对话框已出现之后. onbeforeprint scri ...
- 第十课html5 新增标签及属性 html5学习5
一.常用新增标签 1.header:定义页面的页眉头部 2.nav:定义导航栏 3.footer:定义页面底部,页脚 4.article:定义文章 5.section:定义区域 6.aside:定义侧 ...
随机推荐
- 浅谈C++中的那些内存泄露
尽管学过C语言.可是C++里面的一些基础还是不太懂,还须要再掌握. 老范也開始要讲C++设计模式了,必须快点看了.不然就要白花窝滴钱了. 对于内存泄露,我的个人理解就是程序在执行过程中,自己开辟了空间 ...
- 怎么样学好C++
声明:这篇文章非本人所写,转自:http://coolshell.cn/articles/4119.html 昨天写了一篇如何学好C语言,就有人回复问我如何学好C++,所以,我把我个人的一些学习经验写 ...
- ssh免密码登陆远程服务器
ssh免密码登陆远程服务器 在使用windows下的cygwin或者在linux下使用Terminal进行远程服务器登陆测试的时候总是会要求输入账号密码,对于此我们可以使用ssh将公钥放在服务器上的方 ...
- (转)SQL Server 2005附加2008的数据库
1. 生成for 2005版本的数据库脚本 2008 的manger studio -- 打开"对象资源管理器"(没有的话按F8), 连接到你的实例 -- 右键要转到2005 ...
- Lesson 2: Dive Into Typography (排版)
Lesson 2: Dive Into Typography (排版) 排版是字的艺术,是关于字的一切:字体.字号.行高.行长.字重(斜体/加粗/正常).字距(kerning).行距(leading) ...
- [c#]asp.net开发微信公众平台(6)阶段总结、服务搭建、接入
经过前5篇,跟着一步步来的话,任何人都能搭建好一个能处理各种微信消息的框架了,总结一下最容易忽略的问题: 1.文本消息中可以使用换行符\n : 2.微信发来的消息中带的那个长整型的时间,我们完全 ...
- ORA-01172 ORA-01151
今天发现服务器的9号硬盘坏了,因做了RAID5,报障后也没理会,过了一会儿,有人反应说报表运行不出来,发现服务器所有的硬盘都不工作了,界面也没有反应,就强行关机,再开机可以进入系统,等维修人员来换了新 ...
- 实现类似QQ的折叠效果
// 主要核心是点击自定义header来展开和收起每一组里面的cell,模型里面应该有isShow此属性来记录开展还是收起. // ViewController.m// 实现类似QQ的折叠效果/ ...
- 截取字符串 substring substr slice
截取字符串 substring 方法用于提取字符串中介于两个指定下标之间的字符 substring(start,end) 开始和结束的位置,从零开始的索引 参数 描述 start ...
- phpcms9添加301跳转
在做301跳转时遇到了"错误 310 (net::ERR_TOO_MANY_REDIRECTS):重定向过多."的问题,小编在这里把处理方法简单给大家写出来希望可以帮助到大家,另外 ...