JavaScript工作线程
JavaScript一次只能做一件事，但是有了HTML5和Web工作线程，一切都改变了
对于很多应用来说，JavaScript的单线程计算模式确实表现不错，而且可以让编程变得简单，但是在编写计算密集的代码时，就会影响JavaScript的能力，而且会占用大量等待时间。
但是有了web工作线程，就可以创建一个另外的web工作线程，它会在一个单独的线程中运行，由它完成所有艰巨的工作
- 要使用web工作线程，浏览器首先必须创建一个或多个工作线程，每个工作线程都由各自的JavaScript定义，其中包含完成工作所需的全部代码
- 工作线程生活在一个相当受限的世界中，它们无法访问主浏览器代码能够访问的很多运行时的对象，如DOM或主代码中的所有变量和函数
- 要让一个工作线程开始工作，浏览器通常会向它发送一个消息，然后开始工作
-
工作线程完成它的工作后，会发送消息，并返回最终的处理结果
第一个工作线程
第一个Web工作线程
在正式创建一个工作线程之前，首先当然是检查浏览器是否支持Web工作线程
if(!window["worker"]){
alert("Bummer,no web workers");
} //如果浏览器不支持，会弹出消息
如何创建Web工作线程
var worker = new Worker("worker.js")
//'worker.js' javascript文件中包含这个工作线程的相应代码
向工作进程分配任务
postMessage()方法
window.onload=function(){
var worker=new Worker("worker.js");
worker.postMessage("ping"); //发送至工作线程的数据
}
//postMessage(); Worker的内置方法，可用于发送任务信息
//postMessage()方法可发送多种数据，字符串、数组、json对象...但不能发送函数
除了发布任务，我们还需获取到最终的成果
onmessage()方法，可用于接收来自工作线程的消息
window.onload=function(){
var worker=new Worker("worker.js");
worker.postMessage("ping"); //发送至工作线程的数据
/* 接收到工作线程的消息后，立刻调用该函数 */
worker.onmessage=function(event){
//event 表示接收到的，来自工作线程的数据对象
//data属性包含工作线程发送的消息
var message = "Worker says"+event.data;
document.getElementById("status").textContent=message;
}
}
编写工作线程(写在 worker.js 中)
工作线程最基本的要求就是能接收从主代码中发送过来的任务
为此，我们还要使用另一个onmessage处理程序
onmessage=function(event){
}
编写工作线程的消息处理程序
/***** 编辑在worker.js *****/
onmessage=function(event){
if(event.data=="ping"){
postMessage(" pong");
}
}
//工作线程同样使用postMessage()来发送消息
到此，一个完整的案例就基本编写完成了，现在补上HTML完整代码
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<title>JavaScript工作线程</title>
</head>
<body>
<h3 id="status"></h3>
<script>
window.onload=function(){
var worker=new Worker("worker.js");
worker.postMessage("ping"); //发送至工作线程的数据
/* 接收到工作线程的消息后，立刻调用该函数 */
worker.onmessage=function(event){
//event 表示接收到的，来自工作线程的数据对象
//data属性包含工作线程发送的消息
var message = "Worker says"+event.data;
document.getElementById("status").textContent=message;
}
}
</script>
</body>
</html>
PS：html文件与worker.js处于同一路径
如果不是在服务器上运行，chrome浏览器会出现安全性限制，火狐浏览器则不会出现类似问题
其他参数及作用
- event.target;
target是发出消息的工作线程的一个引用，可以知道这个消息来自哪一个线程 - importScripts
可以使用这个函数向工作线程中导入一个或多个JavaScript文件
网友评论