本文参考《Html 5 与 CSS 3 权威指南》
在Html 5诞生之后，我们可以使用javascript来实现多线程处理。H5 新增了一个web workers api，使用这个API，用户可以很容易地创建在后台运行的线程,H5 中被称为workder ,如果将费时比家长的操作放到后台去执行，对用户在界面的操作就完全没有影响了。
创建后台线程也十分的简单，只要在workder类的构造器中将需要执行的脚本文件的url作为参数，然后创建worker对象就可以了，如下所示
var worker = new Worker("test.js")
在创建了worker对象之后，我们可以通过worker的postMessage()来向后台线程发送消息。可以使用onmessage(msg) 来获取消息。
下面我们来看一下多线程之间通信，在这里实现多个worker之间通信实际上需要借助主线程，子线程A将消息发送给主线程，然后主线程将A线程发送的消息发送给B.下面是实现的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var sendWorker = new Worker("js/send.js"); //消息发送线程
var receiveWorker = new Worker("js/receive.js"); //消息接送线程
sendWorker.onmessage = function(msg)
{
receiveWorker.postMessage(msg.data); //接收到消息之后马上发给接受线程
}
function sendMessage()
{
sendWorker.postMessage(""); //启动消息发送线程发送消息。
}
</script>
<input type="button" value="通信" onclick="sendMessage()"/>
</body>
</html>
send.js
onmessage = function(msg)
{
postMessage("这个是子线程A 发送的消息");// 线程A 发出消息
}
receive.js
onmessage = function(msg)
{
//alert(msg.data); //这句话会报错，因为当前这个方法是在子线程中执行,所以不能使用alert,因为这个会影响UI
console.log(msg.data); // 接受线程在控制台输出
}
最后说一下workder之中可用的变量，函数，类
self :该关键字用来本线程的范围。
postMessage(msg) 向创建线程的源窗口发送消息。
onmessage 获取接受消息的事件 句柄。
importScripts(urls) 导入其他的javascript脚本。
使用navigator对象。
使用sessionStorage/localStorage
使用ajax请求
嵌套线程
close结束本线程。
setTimeout/setInterval
eval().isNaN()等，可以使用所有javascript核心函数。
object
可以使用WebSockets api.
文章内容如有错误，请批评指正。
时间： 2024-11-03 21:38:44