JavaScript工作線程
JavaScript一次只能做一件事赏淌，但是有了HTML5和Web工作線程，一切都改變了
對(duì)于很多應(yīng)用來說盈魁，JavaScript的單線程計(jì)算模式確實(shí)表現(xiàn)不錯(cuò)侧蘸，而且可以讓編程變得簡(jiǎn)單，但是在編寫計(jì)算密集的代碼時(shí)生年，就會(huì)影響JavaScript的能力，而且會(huì)占用大量等待時(shí)間廓奕。
但是有了web工作線程抱婉，就可以創(chuàng)建一個(gè)另外的web工作線程，它會(huì)在一個(gè)單獨(dú)的線程中運(yùn)行桌粉，由它完成所有艱巨的工作
- 要使用web工作線程蒸绩，瀏覽器首先必須創(chuàng)建一個(gè)或多個(gè)工作線程，每個(gè)工作線程都由各自的JavaScript定義铃肯，其中包含完成工作所需的全部代碼
- 工作線程生活在一個(gè)相當(dāng)受限的世界中侵贵，它們無法訪問主瀏覽器代碼能夠訪問的很多運(yùn)行時(shí)的對(duì)象，如DOM或主代碼中的所有變量和函數(shù)
- 要讓一個(gè)工作線程開始工作缘薛，瀏覽器通常會(huì)向它發(fā)送一個(gè)消息，然后開始工作
-
工作線程完成它的工作后卡睦，會(huì)發(fā)送消息宴胧，并返回最終的處理結(jié)果
第一個(gè)工作線程
第一個(gè)Web工作線程
在正式創(chuàng)建一個(gè)工作線程之前，首先當(dāng)然是檢查瀏覽器是否支持Web工作線程
if(!window["worker"]){
alert("Bummer,no web workers");
} //如果瀏覽器不支持表锻，會(huì)彈出消息
如何創(chuàng)建Web工作線程
var worker = new Worker("worker.js")
//'worker.js' javascript文件中包含這個(gè)工作線程的相應(yīng)代碼
向工作進(jìn)程分配任務(wù)
postMessage()方法
window.onload=function(){
var worker=new Worker("worker.js");
worker.postMessage("ping"); //發(fā)送至工作線程的數(shù)據(jù)
}
//postMessage(); Worker的內(nèi)置方法恕齐，可用于發(fā)送任務(wù)信息
//postMessage()方法可發(fā)送多種數(shù)據(jù)，字符串瞬逊、數(shù)組显歧、json對(duì)象...但不能發(fā)送函數(shù)
除了發(fā)布任務(wù)仪或，我們還需獲取到最終的成果
onmessage()方法，可用于接收來自工作線程的消息
window.onload=function(){
var worker=new Worker("worker.js");
worker.postMessage("ping"); //發(fā)送至工作線程的數(shù)據(jù)
/* 接收到工作線程的消息后士骤，立刻調(diào)用該函數(shù) */
worker.onmessage=function(event){
//event 表示接收到的范删，來自工作線程的數(shù)據(jù)對(duì)象
//data屬性包含工作線程發(fā)送的消息
var message = "Worker says"+event.data;
document.getElementById("status").textContent=message;
}
}
編寫工作線程(寫在 worker.js 中)
工作線程最基本的要求就是能接收從主代碼中發(fā)送過來的任務(wù)
為此，我們還要使用另一個(gè)onmessage處理程序
onmessage=function(event){
}
編寫工作線程的消息處理程序
/***** 編輯在worker.js *****/
onmessage=function(event){
if(event.data=="ping"){
postMessage(" pong");
}
}
//工作線程同樣使用postMessage()來發(fā)送消息
到此拷肌，一個(gè)完整的案例就基本編寫完成了到旦，現(xiàn)在補(bǔ)上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"); //發(fā)送至工作線程的數(shù)據(jù)
/* 接收到工作線程的消息后，立刻調(diào)用該函數(shù) */
worker.onmessage=function(event){
//event 表示接收到的巨缘，來自工作線程的數(shù)據(jù)對(duì)象
//data屬性包含工作線程發(fā)送的消息
var message = "Worker says"+event.data;
document.getElementById("status").textContent=message;
}
}
</script>
</body>
</html>
PS：html文件與worker.js處于同一路徑
如果不是在服務(wù)器上運(yùn)行添忘，chrome瀏覽器會(huì)出現(xiàn)安全性限制，火狐瀏覽器則不會(huì)出現(xiàn)類似問題
其他參數(shù)及作用
- event.target;
target是發(fā)出消息的工作線程的一個(gè)引用若锁，可以知道這個(gè)消息來自哪一個(gè)線程 - importScripts
可以使用這個(gè)函數(shù)向工作線程中導(dǎo)入一個(gè)或多個(gè)JavaScript文件
