HTML5 worker 多线程
测试服务器： apache 2.2
先让我们来幻想下如果WEB页面上能用多线程，那是不是意味这WEB页面逐渐取代了客户端？
HTML5 规范
好了切入正题，那么WEB的多线程到底是个虾米？
从字面上来看，我们应该看的出他的实现是WORKER模式吧，什么是WORKER模式？
写过多线程的同学应该比我更清楚，大体的概念是：线程的创建由一个WORKER来决定，维护了一个线程池。
接着，我们看下HTML5的多线程有什么特性的：
1. 在线程中是不能操作DOM节点的（想要操作的话只能发送消息给worker创建者回调函数）
2. 多线程的本质其实是真正的系统线程
3. 能使用setTimeout(), clearTimeout(), setInterval(),clearInterval()等函数
4. 能进行IO操作（ajax）
worker大致的流程是这样子的：
创建一个worker对象，绑定一个接收后台处理消息的方法 onmessage 和一个错误处理方法 onerror 。使用postMessage来传递数据，这个方法的参数是严格的JSON对象。当后台处理完使用postMessage方法将数据传回前台，也就是onmessage的方法。
接下来看例子：
这个例子是页面传递一个数让后台加3，然后在页面显示
调用者：
!DOCTYPE html>
html>
head> tITle> worker test/title>
meta http-equiv="PRagma" content="no-cache"> /meta>
meta http-equiv="expires" content="-1"> /meta>
meta http-equiv="cache-control" content="no-cache"> /meta>
/head>
body>
p id="result" > zz/p>
/body>
script type="text/javascript"> !--
VAR worker = new Worker("work.js");
worker.onmessage = function(event){
document.write(event.data);
} ;
worker.onerror = function(event){
alert(event.message);
} ;
worker.postMessage(1);
// --> /script>
/html>
上面的代码 创建了一个worker对象，然后初始化onmessage 和 onerror的方法，最后传入一个整数1
接着我们来看下worker.js的内容
onmessage = function(event) {
var data = event.data+3;
postMessage(data);
} ;
由于work.js是在Worker上下文下的，所以能直接使用 postMessage.
一旦使用了这个方法，那么它以下的代码将不执行，如果想要实现循环的话，建议使用setInterval
而且Worker没有锁的机制，多线程的同步问题只能靠代码来解决（比如定义信号变量）
这里还值得一提的是 worker中还能再有子worker 比如以下代码
var symbol = false;
var obj ;
var i = 0 ;
onmessage = function(event) {
obj = event.data;
callWorker();
} ;
setInterval(function(){
if(i == 10) {
postMessage(obj);
}
} ,100);
callWorker = function(){
var worker = new Worker("sub.js");
worker.onmessage = function(event){
obj.a = event.data;
i = 10;
} ;
worker.onerror = function(event){
throw e;
} ;
worker.postMessage(1);
} ;
sub.js
onmessage = function(event){
postMessage(7);
} ;
上述例子在父的worker中调用子worker：使用setInterval的方法等待i的值由子线程改变为10，然后返回到页面
这里还值得注意的方法有两个close 和 terminate
close 是worker自己销毁自己
terminate是worker创建者销毁worker
测试浏览器： FF 3.6测试服务器： APACHE 2.2
先让我们来幻想下如果WEB页面上能用多线程，那是不是意味这WEB页面逐渐取代了客户端？
HTML5 规范
好了切入正题，那么WEB的多线程到底是个虾米？
从字面上来看，我们应该看的出他的实现是WORKER模式吧，什么是WORKER模式？
写过多线程的同学应该比我更清楚，大体的概念是：线程的创建由一个WORKER来决定，维护了一个线程池。
接着，我们看下HTML5的多线程有什么特性的：
1. 在线程中是不能操作DOM节点的（想要操作的话只能发送消息给worker创建者回调函数）
2. 多线程的本质其实是真正的系统线程
3. 能使用setTimeout(), clearTimeout(), setInterval(),clearInterval()等函数
4. 能进行IO操作（ajax）
worker大致的流程是这样子的：
创建一个worker对象，绑定一个接收后台处理消息的方法 onmessage 和一个错误处理方法 onerror 。使用postMessage来传递数据，这个方法的参数是严格的JSON对象。当后台处理完使用postMessage方法将数据传回前台，也就是onmessage的方法。
接下来看例子：
这个例子是页面传递一个数让后台加3，然后在页面显示
调用者：
!DOCTYPE html>
html>
head> title> worker Test/title>
meta http-equiv="pragma" content="no-cache"> /meta>
meta http-equiv="expires" content="-1"> /meta>
meta http-equiv="cache-control" content="no-cache"> /meta>
/head>
body>
p id="result" > zz/p>
/body>
script type="text/javascript"> !--
var worker = new Worker("work.js");
worker.onmessage = function(event){
document.write(event.data);
} ;
worker.onerror = function(event){
alert(event.message);
} ;
worker.postMessage(1);
// --> /script>
/html>
上面的代码 创建了一个worker对象，然后初始化onmessage 和 onerror的方法，最后传入一个整数1
接着我们来看下worker.js的内容
onmessage = function(event) {
var data = event.data+3;
postMessage(data);
} ;
由于work.js是在Worker上下文下的，所以能直接使用 postMessage.
一旦使用了这个方法，那么它以下的代码将不执行，如果想要实现循环的话，建议使用setInterval
而且Worker没有锁的机制，多线程的同步问题只能靠代码来解决（比如定义信号变量）
这里还值得一提的是 worker中还能再有子worker 比如以下代码
var symbol = false;
var obj ;
var i = 0 ;
onmessage = function(event) {
obj = event.data;
callWorker();
} ;
setInterval(function(){
if(i == 10) {
postMessage(obj);
}
} ,100);
callWorker = function(){
var worker = new Worker("sub.js");
worker.onmessage = function(event){
obj.a = event.data;
i = 10;
} ;
worker.onerror = function(event){
throw e;
} ;
worker.postMessage(1);
} ;
sub.js
onmessage = function(event){
postMessage(7);
} ;
上述例子在父的worker中调用子worker：使用setInterval的方法等待i的值由子线程改变为10，然后返回到页面
这里还值得注意的方法有两个close 和 terminate
close 是worker自己销毁自己
terminate是worker创建者销毁worker
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML5 worker 多线程
本文地址： https://pptw.com/jishu/586405.html