Web Worker的使用與知識點總結
阿新 • • 發佈：2018-12-10
Web Workers的使用與知識點總結
目錄
1、知識點速覽
2、簡單使用
2.1 專用worker的簡單使用
使用worker計算一個簡單的兩數相乘，主執行緒傳遞使用者的輸入，並把worker執行緒返回的結果填入頁面，以下是主執行緒的程式碼，也就三步，建立worker、傳送訊息、繫結事件獲取返回結果。如果需要可以結束worker。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title >delicatedWorker</title> </head> <body> <input id="num1" type="number"> * <input id="num2" type="number"> <button id="btn">等於</button> <input id="output" type="text"> <script type="text/javascript"> var output = document.getElementById('output'); //建立專用worker物件 const delicatedWorker = new Worker('./script/dw.js'); document.getElementById('btn').onclick = function(){ const num1 = document.getElementById('num1').value, num2 = document.getElementById('num2').value; output.value = '計算中...'; // 向worker執行緒傳送訊息 delicatedWorker.postMessage([num1,num2]); console.log('send success'); } // 繫結事件，監聽worker執行緒返回的訊息 delicatedWorker.onmessage = function(e){ let result = e.data; output.value = e.data; console.log('receive success'); } delicatedWorker.onerror = function(e){ console.log(e.message); } //立即終止worker執行緒 // delicatedWorker.terminate(); </script> </body> </html>
以下是worker執行緒的程式碼，繫結事件接收訊息，處理訊息，返回訊息。
// 監聽主執行緒傳送的訊息 onmessage = function(e){ let result = e.data[0] * e.data[1]; setTimeout(()=>postMessage(result),1000); } // 引入更多指令碼 // importScripts() //轉移一個物件所有權的例子 // var uInt8Array = new Uint8Array(1024*1024*32); // for (var i = 0; i < uInt8Array .length; ++i) { // uInt8Array[i] = i; // } // onmessage = function(e){ // setTimeout(()=>postMessage(uInt8Array.buffer,[uInt8Array.buffer]),1000); // }
2.2 共享worker的簡單使用
同樣的例子，同樣的步驟，只不過用共享worker的寫法稍有不同，以下是主執行緒的程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SharedWorker1</title> </head> <body> <input id="num1" type="number"> * <input id="num2" type="number"> <button id="btn">等於</button> <input id="output" type="text"> <script type="text/javascript"> //建立共享worker const sharedWorker = new SharedWorker('script/sw.js'); document.getElementById('btn').onclick = function(){ const num1 = document.getElementById('num1').value, num2 = document.getElementById('num2').value; //傳送訊息 sharedWorker.port.postMessage([num1,num2]); } // 接收訊息，直接用onmessage的寫法 // sharedWorker.port.onmessage = function(e){ // document.getElementById('output').value = e.data; // } // 用start（）的寫法 sharedWorker.port.addEventListener('message',(e)=>{ document.getElementById('output').value = e.data; }); sharedWorker.port.start(); </script> </body> </html>
以下是worker執行緒的程式碼：
// 當一個埠連線被建立時，使用onconnect事件處理函式來執行程式碼
onconnect = function(e){
// 使用事件的ports屬性來獲取埠並存儲在變數中
let port = e.ports[0];
// 向主執行緒傳送訊息
port.onmessage = function(e){
port.postMessage(e.data[0]*e.data[1])
}
}