1、代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Worker演练</title>
</head>
<body>
  <!-- 输入 10000000000-->
  <div>计算从 1 到给定数值的总和</div>
  <div>
  <input type="text" placeholder="请输入数字" id="num1" />
  <button id="singleRef">主线程计算</button>
  <span>计算结果为：<span id="result1">-</span></span>
  </div>
  <div>
    <input type="text" placeholder="请输入数字" id="num2" />
    <button id="multipleRef">worker计算</button>
    <span>计算结果为：<span id="result2">-</span></span>        
  </div>
  <div>在计算期间你可以填XX表单</div>
  <input type="text" placeholder="请输入姓名" />
  <input type="text" placeholder="请输入年龄" />
  <script type="module" src="./multiple.js"></script>
  <script type="module" src="./single.js"></script>
</body>
</html>

js 复制代码

//主线程运算
//single.js
singleRef.onclick = () => {
  const num = parseInt(document.getElementById('num1').value)
  let result = 0
  console.log('%c 开始主线程测试 ', 'color:#fff; background:#00897b ')
  console.time('主线程执行时间')
  for (let i = 0; i <= num; i++) {
    result += i
  }
  // 由于是同步计算，在没计算完成之前下面的代码都无法执行
  console.timeEnd('主线程执行时间')
  document.getElementById('result1').innerHTML = result
}

js 复制代码

//multiple.js
//worker线程运算
multipleRef.onclick = () => {
  console.log('%c 开始Worker测试 ', 'color:#fff; background:#00897b ')
  const worker = new Worker('./worker.js')
  const num = parseInt(document.getElementById('num2').value);
  console.time('Worker执行时间')
   worker.postMessage(num)
   worker.onmessage = function (e) {
    document.getElementById('result2').innerHTML = e.data
    console.timeEnd('Worker执行时间')
  }
}

js 复制代码

//worker.js
function calc(num) {
  let result = 0
  // 计算求和（模拟复杂计算）
  for (let i = 0; i <= num; i++) {
    result += i
  }
  self.postMessage(result)
}

self.onmessage = function (e) {
  calc(e.data)
}