web worker
阿新 • • 發佈：2020-08-19
web worker 多開子執行緒，且這些子執行緒無I/O許可權，只能為主執行緒分擔一些諸如計算的任務
不足
worker內程式碼不能操作DOM（更新UI）
只能載入伺服器的js檔案且不能跨域載入JS
不是所有瀏覽器都支援這個特性
API
1. 主執行緒
①建立新的Worker
var worker = new Worker(“worker.js”)
②傳遞引數
worker.postMessage()
③接收訊息
worker.onMessage = function(msg){}
worker.onmessageerror = function(msg){}
④異常處理
worker.onerror = function(err){}
⑤結束worker
worker.terminate()
2.worker執行緒
self.name： Worker 的名字。該屬性只讀，由建構函式指定。
self.onmessage：指定message事件的監聽函式。
self.onmessageerror：指定 messageerror 事件的監聽函式。傳送的資料無法序列化成字串時，會觸發這個事件。
self.close()：關閉 Worker 執行緒。
self.postMessage()：向產生這個 Worker 執行緒傳送訊息。
self.importScripts()：載入 JS 指令碼。
示例
index.html程式碼：
<!DOCTYPE html> <html> <body> <p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button> <input type="text" value="" /> <script> var w; function startWorker() { if (typeof Worker !== 'undefined') { if (typeof w === 'undefined') { w = new Worker('demo_workers.js'); } w.onmessage = function (event) { document.getElementById('result').innerHTML = event.data; }; } else { document.getElementById('result').innerHTML = 'Sorry, your browser does not support Web Workers...'; } } function stopWorker() { w.terminate(); } </script> </body> </html>
demo_workers.js程式碼：
function timedCount () { for (var i = 0; i < 10000000000; i++) { if (i % 100000 === 0) { postMessage(i); } } } timedCount();
執行結果：