js创建多线程_js开启多线程-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44057991/article/details/130847539

文章介绍了如何通过创建WebWorker线程来处理耗时的计算任务或Ajax请求，从而避免阻塞主线程，提升JavaScript单页应用的性能。示例中展示了如何在index.html中创建Worker线程并通信，以及在worker.js中处理任务并回传结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们知道js是单线程的，如果把占用大量计算资源的代码，或者获取大量数据，耗时较多的请求分离出去，用一个单独的线程去处理，会不会提升页面的性能的，答案是肯定的，尤其是现在我们开发大多是单页应用，这种多线程的作用就会更加明显，那该怎么实现呢，以下是一个简单的示例：

1.准备两个文件，index.html 和 worker.js

index.html创建worker线程，并发送信息、监听信息，代码如下

<!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>Document</title>
</head>
<body>
  
</body>
<script>
  // 创建worker
  const worker = new Worker('./worker.js')
  // 向worker线程发送消息
  worker.postMessage('hello worker')
  // 监听worker的message事件
  worker.onmessage = function (e) {
    console.log('主线程收到', e.data)
  }
  console.log('主线程执行完毕');

</script>
</html>

2. worker.js 则是我们的线程文件，里面做一些数据处理，数据请求等，执行完成后将内容发送给index.html

function ajax (url) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest()
    xhr.open('GET', url)
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText))
        } else {
          reject(xhr.status)
        }
      }
    }
    xhr.send()
  })
}
// 获取主线程传值
this.onmessage = function (e) {
  console.log('子线程收到', e.data)
  // 向主线程发送数据
  ajax("https://api.seniverse.com/v3/weather/now.json?key=SCYrvkytJze9qyzOh&location=北京").then(res => {
    this.postMessage(res)
  })
}

如果一切顺利，你将看到如下结果：