JavaScript之多執行緒
我們知道客戶端JavaScript其中一個基本的特性就是單執行緒：比如，瀏覽器無法同時執行兩個事件處理程式，它也無法在一個事件處理程式執行的時候觸發一個計時器。隨著Web應用複雜性的與日俱增，越來越複雜的計算在所難免。長時間執行的JavaScript程序會導致瀏覽器凍結使用者介面，讓人感覺螢幕“凍結”了，這就造成了使用者體驗問題，這時候要解決這個問題就需要用到多執行緒操作了（多執行緒簡單來說就是你幹著這件事的同時還能做其他事情，而這兩件事之間不會發生衝突）在Web Workers標準中，定義瞭解決客戶端JavaScript無法多執行緒的問題。其中定義的“Worker”是指執行程式碼的並行執行緒（或者叫後臺執行緒）。
一、worker的使用
1、怎樣新建一個執行緒
要建立一個執行緒只需要例項化一個Worker物件出來就行了，然後傳入對應的引數即需要在worker中執行的js指令碼的url
例項：
index.js檔案
var worker = new Worker(“test.js”);
這樣我們就建立好了一個並行執行緒。
2、如何傳遞資料
在web workers標準中，給我們提供了一個postMissage方法來傳遞資料，通過message事件來接受資料。
（1）資料從並行執行緒傳遞到js主執行緒
例項：
test.js檔案
function test(n,m){
return n*m;
}
var res = test(2,3);
postMessage(res);
index.js檔案
var worker = new Worker(“test.js”);
worker.onmessage = function(e){
console.log(e.data);//6
}
這裡e.data的值即為在並行執行緒中傳遞過來的資料
（2）資料從主執行緒傳遞到js並行執行緒
例項：
index.js檔案
var worker = new Worker("test.js");
workder.postMessage("本大爺從主執行緒而來！")
test.js檔案
onmessage = function(e){
console.log(e.data);//本大爺從主執行緒而來！
}
這樣就完成了資料的相互傳遞，如果傳遞的資料不止一個，可以通過物件形式傳入多個(可以隨便傳遞任何形式的物件資料)，比如： test.js檔案 var msg = “我是並行執行緒中的資料”; function test(n,m){ return n*m; } var res = test(2,3); postMessage({res,msg});
index.js檔案
var worker = new Worker("test.js");
worker.onmessage = function(e){
console.log(e.data);
}
在e.data中同樣可以得到在test.js檔案裡傳入過來的兩個資料。
（3）如果worker丟擲異常，並且他自己沒有對其進行捕獲和處理，可以通過監聽的一個error事件來傳遞異常。 例項： index.js檔案 // 記錄錯誤訊息日誌：包括Worker的檔名和行數 worker.onerror = function(e) { console.log("Error at " + e.filename + “:” + e.lineno + ": " + e.message); } 3、如何結束並行執行緒 Worker物件有一個方法：terminate(),該方法強制一個worker執行緒結束執行。 例項： index.js檔案 worker.terminate(); 二、Worker的作用域 關於Web Worker，最重要的是要知道它所執行的JavaScript程式碼完全在另一個作用域中，與當前網頁中的程式碼不共享作用域*（因此在worker程式碼中不能進行DOM操作）*。WorkerGlobalScope全域性物件表示了該新的執行環境。WorkerGlobalScope物件在某種程度上來說是大於核心的JavaScript全域性物件，但又小於整個客戶端的Window物件。同樣在WorkerGlobalScope中也有postMessage和message方法。 WorkerGlobalScope是一個供Worker使用的全域性物件，因此該物件上的postMessage方法和onmessage屬性在worker程式碼中使用的時候，看起來像是全域性函式和全域性變數。因為WorkerGlobalScope是Worker的全域性物件，所以它有所有核心JavaScript全域性物件擁有的那些屬性，諸如JSON物件、isNaN（）函式和Date（）建構函式，最小化的navigator 物件，包括onLine 、appName 、appVersion 、userAgent 和platform 屬性； 只讀的location 物件； setTimeout() 、setInterval() 、clearTimeout() 和clearInterval() 方法；XMLHttpRequest 建構函式。 WorkerGlobalScope物件上定義了一個很有意思的全域性函式，importScripts，Worker可以使用此方法來載入任何需要的庫程式碼。 例項： test2.js檔案 var num = 88888;
test.js檔案 importScripts(“test2.js”); console.log(num);//88888 在test.js檔案通過importScripts引入test2.js檔案，即可訪問到test2腳本里面的變數。 注意：importScripts是一個同步的方法，他直到所有的指令碼都已經載入並執行完成才會返回。 目前支援web workers的瀏覽器有IE10+、Firefox3.5+、Safari4+、Opera 10.6+、chrome和ISO版的Safari。 小結 Web workers：可以執行非同步JavaScript程式碼，避免阻塞使用者介面，在執行復雜計算和資料處理的時候，這個API非常有用，不然，這些任務輕則會佔用很長時間，重則會導致使用者無法與頁面互動。
參考文獻：JavaScript權威指南(第六版) 參考文獻：JavaScript高階程式設計(第3版)
