谁说 js 是单线程的？-五八三

“我正在参加「掘金·启航计划」”

前言：我们在学习 js 的过程中, 或多或少地都会听说过 “js是单线程的” 这句话。诚然，对于 js 本身来说，确实是单线程的，但是，js 的运行时已经给出了并发的解决方案。下面，就让我们感受一下，js 是如何实现多线程的。

Browser

在浏览器中，对应的解决方案就是 Web Worker (使用 Web Workers – Web API 接口参考 | MDN (mozilla.org))

// main.js

const one = new Worker('./one.js')
const two = new Worker('./two.js')


one.postMessage('我是主线程')
two.postMessage('我是主线程')




function receiveMessage(e) {
const { data } = e
const { source, res } = data

console.log(`我是${source}发来的信息，计算结果是${res}`);
}



one.onmessage = receiveMessage
two.onmessage = receiveMessage

// one.js

self.onmessage = (e) => {

  const { data } = e

  console.log(data);





  const arr = new Array(10000).fill(1)





  let s = 0

  for (let i of arr) {

    s += i

  }



  self.postMessage({

    source: 'one',
    res: s

  })

}

// two.js

self.onmessage = (e) => {

  const { data } = e

  console.log(data);





  const arr = new Array(10000).fill(1)





  let s = 0

  for (let i of arr) {

    s += i

  }



  self.postMessage({

    source: 'two',
    res: s

  })

}

Node

在浏览器中，对应的解决方案就是 worker_threads (worker_threads 工作线程 | Node.js v20.2.0 文档 (nodejs.cn))
工作线程对于执行 CPU 密集型的 JavaScript 操作很有用。它们对 I/O 密集型的工作帮助不大。 Node.js 内置的异步 I/O 操作比工作线程更高效。

// main.js

const { Worker } = require('node:worker_threads')
const path = require('path')


const one = new Worker(path.join(__dirname, './one.js'), { workerData: 'Hello, world!' })
const two = new Worker(path.join(__dirname, './two.js'), {num: 2})




one.postMessage('主线程的消息')
two.postMessage('主线程的消息')




one.on('message', data => {
  console.log('one 发送来的消息', data)
})



two.on('message', data => {
  console.log('two 发送来的消息', data)
})

// one.js

const {

  parentPort, workerData
} = require('node:worker_threads');





nmessage = (e) => {
  const { data } = e

  console.log(data);

}





parentPort.postMessage(workerData)

// two.js

const {

  parentPort,workerData
} = require('node:worker_threads');





onmessage = (e) => {
  const { data } = e

  console.log(data);

}





parentPort.postMessage('我是two的信息', workerData)

兼容

当然也有一种兼容的方案，我们也有现成的轮子
threads.js ( github.com/andywer/thr… )

// master.js
import { spawn, Thread, Worker } from "threads"

const auth = await spawn(new Worker("./workers/auth"))
const hashed = await auth.hashPassword("Super secret password", "1234")

console.log("Hashed password:", hashed)

await Thread.terminate(auth)




// workers/auth.js
import sha256 from "js-sha256"
import { expose } from "threads/worker"



expose({
  hashPassword(password, salt) {
    return sha256(password + salt)
  }
})