* [TOC] > [阮一峰參考網站](http://javascript.ruanyifeng.com/htmlapi/webworker.html#toc2) ## 概述 Web Worker為Web內容在后臺線程中運行腳本提供了一種簡單的方法。線程可以執行任務而不干擾用戶界面 **注意事項:** 1. 同源限制 分配給 Worker 線程運行的腳本文件，必須與主線程的腳本文件同源。 2. DOM 限制 Worker 線程所在的全局對象，與主線程不一樣，無法讀取主線程所在網頁的 DOM 對象，也無法使用document、window、parent這些對象。但是，Worker 線程可以navigator對象和location對象。 3. 通信聯系 Worker 線程和主線程不在同一個上下文環境，它們不能直接通信，必須通過消息完成。 4. 腳本限制 Worker 線程不能執行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 對象發出 AJAX 請求。 5. 文件限制 Worker 線程無法讀取本地文件，即不能打開本機的文件系統 `file://`，它所加載的腳本，必須來自網絡。 6. 數據拷貝 在主頁面與 worker 之間傳遞的數據是通過**拷貝** ### 語法 ``` // 監聽事件 onmessage onmessageerror // 發送通訊數據 postMessage // 關閉 work terminate ``` ### 專用worker main.js ``` var myWorker = new Worker('worker.js'); const first = document.querySelector('#number1'); first.onchange = function() { myWorker.postMessage([first.value,second.value]); console.log('Message posted to worker'); } ``` work.js ``` onmessage = function(e) { console.log('Message received from main script'); var workerResult = 'Result: ' + (e.data[0] * e.data[1]); console.log('Posting message back to main script'); postMessage(workerResult); } ``` ### 生成subworker Worker 線程中可使用全局函數`importScripts()`來引入腳本，該函數接受0個或者多個URI作為參數來引入資源 ``` importScripts(); /* 什么都不引入 */ importScripts('foo.js'); /* 只引入 "foo.js" */ importScripts('foo.js', 'bar.js'); /* 引入兩個腳本 */ ``` ### 共享worker 一個共享worker可以被多個腳本使用——即使這些腳本正在被不同的window、iframe或者worker訪問 ``` var myWorker = new SharedWorker('worker.js'); myWorker.port.start(); // 父級線程中的調用 squareNumber.onchange = function() { myWorker.port.postMessage([squareNumber.value,squareNumber.value]); console.log('Message posted to worker'); } ``` work.js ``` onconnect = function(e) { var port = e.ports[0]; port.onmessage = function(e) { var workerResult = 'Result: ' + (e.data[0] * e.data[1]); port.postMessage(workerResult); } } ``` ## 示例 ## 嵌入式 work ``` <script type="text/js-worker"> console.log("hello") </script> <script type="text/js-worker"> console.log("hello-1") </script> <script> document.querySelectorAll("script[type=\"text\/js-worker\"]").forEach(item=>{ new Worker("data:text/javascript;charset=US-ASCII,"+encodeURIComponent(item.innerHTML)) }) </script> ```