js创建多线程

article/2025/10/9 9:50:34

我们知道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>// 创建workerconst 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)})
}

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