一、阮一峰Web Worker使用教程
二、web worker的简单使用
-
在同一页面中使用
<script>作为worker的脚本文件<!DOCTYPE html> <html> <head></head> <body> <button onclick="createWorker()">创建worker线程并发送消息</button> <script id='SCRIPT_worker'> // 将作为线程的程序脚本 self.onmessage = (_e) => { console.log('[WORKER] received: ' + _e.data) self.postMessage('You said: ' + _e.data) } setTimeout(() => { console.log(self.name) }, 1000) setTimeout(() => { // 不会打印，因为3000ms后该线程已经在主线程中被关闭了 console.log(self.name) }, 3000) </script> <script> function createWorker() { // 使用<script>作为线程worker_1的脚本 let blob = new Blob([document.getElementById('SCRIPT_worker').textContent]) let url = window.URL.createObjectURL(blob) let worker = new Worker(url, { name: 'worker_1'}) worker.onmessage = (_e) => { console.log('[MAIN] received: ' + _e.data); } worker.postMessage('Hello!') setTimeout(() => { worker.terminate() }, 2000) } </script> </body> </html>