前端开启多线程 Web Worker

Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面

  • Worker必须在服务器才能用Worker的api
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <!-- first:  -->
  13.     first：<input type="text" id="first"></br>
  14.     second：<input type="text" id="second">
  16.     <script>
  17.         const myWorker = new Worker('./work.js')
  18.         const first = document.querySelector('#first')
  19.         const second = document.querySelector('#second')
  20.         first.onchange = function () {
  21.             myWorker.postMessage([first.value, second.value]);
  22.             console.log('first：Message posted to worker');
  23.         }
  24.         second.onchange = function () {
  25.             myWorker.postMessage([first.value, second.value]);
  26.             console.log('second：Message posted to worker');
  27.         }
  28.         myWorker.onmessage=function(e){
  29.             console.log("回传主线程的内容"+e.data)
  30.         }
  31.     </script>
  32. </body>
  34. </html>

work.js

  1. onmessage = function (e) {
  2.     console.log('Message received from main script');
  3.     var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
  4.     console.log('Posting message back to main script');
  5.     postMessage(workerResult);
  6.     //close() 终止线程
  7. }

终止Worker

  1. myWorker.terminate();
  2. 在worker线程中，workers 也可以调用自己的 close  方法进行关闭
  3. close()