JavaScript 单线程还是多线程|极客笔记

JavaScript 单线程还是多线程

JavaScript 是一种脚本语言，最初被设计用于改善 web 页面交互性。在 JavaScript 中，执行代码的进程是单线程的，这意味着在任何给定的时刻只能执行一个任务。在这篇文章中，我们将详细探讨 JavaScript 是单线程的原因以及如何实现多线程模拟。

为什么 JavaScript 是单线程的？

JavaScript 之所以是单线程的主要有以下几个原因：

1. 简单性

JavaScript 最初被设计用于改善 web 页面的交互性。为了保持简单性，JavaScript 引擎被设计为单线程的，这样就避免了复杂的线程同步和死锁等问题。

2. 安全性

如果 JavaScript 是多线程的，那么在浏览器中运行的 JavaScript 代码就可以访问和修改 DOM、cookies 和 AJAX 请求等，这可能导致一些安全隐患。

3. 预留给 UI 渲染

JavaScript 是在浏览器中运行的，而浏览器是多进程的。其中，主进程主要负责 UI 渲染，而 JavaScript 引擎运行在一个独立的线程中，这样可以保证 JavaScript 不会阻塞 UI 渲染。

因此，为了简化设计、确保安全性和保证性能，JavaScript 被设计为单线程的。

单线程的缺点

虽然单线程确保了 JavaScript 的简单性和安全性，但它也存在一些缺点，例如：

1. 阻塞

由于 JavaScript 是单线程的，如果遇到一个耗时的任务，例如大量计算或者长时间的网络请求，那么整个页面都会被阻塞，用户体验会受到影响。

2. 无法充分利用多核 CPU

现代计算机通常都是多核 CPU，但是由于 JavaScript 是单线程的，无法充分利用多核 CPU 的优势。

3. 没法同时处理多个任务

由于 JavaScript 是单线程的，一次只能处理一个任务，无法同时处理多个任务。

多线程模拟

在 JavaScript 中，虽然没有真正的多线程，但是可以通过一些技巧来实现多线程模拟，例如使用 Web Workers、setTimeout 或 Promise。

1. Web Workers

Web Workers 是 HTML5 提供的一种多线程解决方案，可以在后台执行 JavaScript 代码，与主线程并行执行任务。

// main.js
const worker = new Worker('worker.js');
worker.onmessage = function(event) {
  console.log('Message received from worker: ', event.data);
};
worker.postMessage('Hello from main thread');

// worker.js
self.onmessage = function(event) {
  console.log('Message received in worker: ', event.data);
  self.postMessage('Hello from worker thread');
};

运行上面的代码，会在控制台输出两行信息，分别是从主线程发送到 worker 线程的信息和从 worker 线程发送到主线程的信息。

2. setTimeout

通过 setTimeout 函数可以模拟多线程，将任务拆分成多个小任务，通过递归调用 setTimeout 函数来处理。

function doWork(task, callback) {
  console.log(`Starting task:  ${task}`); setTimeout(() => { console.log(`Finished task:$ {task}`);
    callback();
  }, 1000);
}

function runTasks(tasks) {
  if (tasks.length === 0) {
    return;
  }
  const task = tasks.shift();
  doWork(task, () => runTasks(tasks));
}

const tasks = ['Task 1', 'Task 2', 'Task 3'];
runTasks(tasks);

上面的代码将会依次输出每个任务的开始和结束信息，每个任务间隔 1 秒钟。

3. Promise

通过 Promise 可以方便地处理异步任务，在 then 方法中执行下一个任务，从而模拟多线程。

function doWork(task) {
  return new Promise((resolve) => {
    console.log(`Starting task:  ${task}`); setTimeout(() => { console.log(`Finished task:$ {task}`);
      resolve();
    }, 1000);
  });
}

doWork('Task 1')
  .then(() => doWork('Task 2'))
  .then(() => doWork('Task 3'));

上面的代码也会依次输出每个任务的开始和结束信息，每个任务间隔 1 秒钟。