［HTML5］ worker 多线程

最新推荐文章于 2024-04-20 20:30:09 发布

chen123456789198808

最新推荐文章于 2024-04-20 20:30:09 发布

阅读量7.1k

点赞数

分类专栏： HTML5 文章标签： html5 function 多线程测试 web apache

本文链接：https://blog.csdn.net/chen123456789198808/article/details/5537121

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

测试浏览器： 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> <div id="result" >zz</div> </body> <mce:script type="text/javascript"></mce: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 比如以下代码：

sub.js

onmessage = function(event){ postMessage(7); };

上述例子在父的worker中调用子worker：使用setInterval的方法等待i的值由子线程改变为10，然后返回到页面

这里还值得注意的方法有两个close 和 terminate

close 是worker自己销毁自己

terminate是worker创建者销毁worker

chen123456789198808

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
［HTML5］ worker 多线程

测试浏览器： FF 3.6测试服务器： APACHE 2.2 先让我们来幻想下如果WEB页面上能用多线程，那是不是意味这WEB页面逐渐取代了客户端？HTML5 规范好了切入正题，那么WEB的多线程到底是个虾米？从字面上来看，我们应该看的出他的实现是WORKER模式吧，什么是WORKER模式？写过多线程的同学应该比我更清楚，大体的概念是：线程的创建由一
复制链接

扫一扫