JS异步机制

YOUXIN
114 阅读7分钟

javaScript 是一种单线程语言，默认采用同步阻塞的执行模式，这意味着所有任务按顺序执行，遇到耗时操作（如 I/O、文件读取等）时，主线程会被阻塞，直到任务完成。然而，为了避免这些长时间操作阻塞主线程，JavaScript 引入了异步非阻塞机制，允许程序继续执行其他任务，异步任务则在完成后通过事件循环（Event Loop） 来调度执行回调函数或 Promise，从而提高效率。

1. 同步阻塞与异步非阻塞的执行模式

  • 同步阻塞：

    • 同步：任务按顺序执行，只有前一个任务完成后，后一个任务才能开始。
    • 阻塞：如果一个任务需要较长时间才能完成，程序会等待这个任务完成，期间不执行任何其他任务。
    • 例子：读取文件的同步操作。代码在等待读取文件结果的过程中，阻塞后续代码的执行。
     const fs = require('fs');
 const data = fs.readFileSync('file.txt', 'utf8'); // 阻塞后续代码
 console.log(data);
 console.log('This line will execute after file reading is done.');

  • 异步非阻塞：

    • 异步：任务可以在不等待前一个任务完成的情况下启动。当一个异步任务需要执行时，程序会将其交给事件循环处理，而不等待其完成，继续执行后续任务。
    • 非阻塞：在异步任务运行期间，主线程不会被阻塞，它可以执行其他任务。
    • 例子：使用异步文件读取，读取文件的任务交给操作系统，JavaScript 继续执行后续代码，文件读取完成时通过回调处理。
     const fs = require('fs');
 fs.readFile('file.txt', 'utf8', (err, data) => {
   console.log(data);
 });
 console.log('This line will execute immediately, without waiting for file reading.');

2. JavaScript 的单线程与异步机制

JavaScript 是单线程的，这意味着它一次只能执行一个任务。因此，当遇到阻塞任务时，主线程会停下来，直到任务完成，这就是同步阻塞的行为。

为了避免长时间的任务（如网络请求、文件操作）阻塞主线程，JavaScript 引入了异步机制，使得某些任务可以在后台执行，而主线程可以继续执行其他任务。这使得 JavaScript 实现了异步非阻塞的执行模式。

3. 事件循环的引入

JavaScript 的异步非阻塞模式依赖于事件循环（Event Loop） 来调度任务。事件循环是 JavaScript 中处理异步操作的核心机制，它负责管理任务队列的执行顺序。事件循环确保 JavaScript 在主线程上可以继续执行同步代码，而异步任务会在任务完成后通过回调机制再进行处理。

事件循环的工作机制：
  1. JavaScript 引擎首先执行所有的同步任务。
  2. 当遇到异步任务时，JavaScript 会将其交给浏览器或 Node.js 环境处理（如 I/O 操作、定时器等），主线程继续执行后续代码。
  3. 一旦异步任务完成（如 I/O 操作完成、定时器到期），相关的回调函数会被推入任务队列（Task Queue） 。
  4. 事件循环检查主线程是否空闲，如果空闲，则从任务队列中取出异步任务的回调函数，放入主线程执行。
事件循环的例子：
 console.log('Start');
 ​
 setTimeout(() => {
   console.log('Timeout callback');
 }, 1000);
 ​
 console.log('End');

执行流程：

  1. 同步任务：console.log('Start') 和 console.log('End') 是同步任务，立即执行。
  2. 异步任务：setTimeout 是异步操作，将回调函数放入任务队列，并继续执行后续代码。
  3. 事件循环：在主线程空闲时，事件循环会检查任务队列，1秒后回调函数执行，输出 Timeout callback。

4. JavaScript 异步机制的演化过程

JavaScript 的异步机制的演变是为了更好地支持异步非阻塞的执行模式。

4.1 回调函数（Callback）

最早期的异步机制是通过回调函数实现的，异步任务完成后，通过回调函数通知主线程处理结果。回调函数可以实现异步非阻塞的任务执行，但复杂度增加时容易出现回调地狱的问题，代码难以维护。

 function fetchData(callback) {
   setTimeout(() => {
     callback('Data fetched');
   }, 1000);
 }
 ​
 fetchData((data) => {
   console.log(data); // 通过回调函数处理异步操作
 });
4.2 Promise

为了改善回调函数的缺点，ES6（2015年）引入了Promise。Promise 允许开发者以更清晰的方式处理异步任务，解决了回调地狱问题。Promise 本质上是对异步任务的一种封装，状态一旦改变，回调函数就会被调用。

 const promise = new Promise((resolve, reject) => {
   setTimeout(() => {
     resolve('Data fetched');
   }, 1000);
 });
 ​
 promise.then((data) => {
   console.log(data);
 });

在底层，Promise 的回调函数依然是依赖事件循环来执行的，它会被放入微任务队列，在当前宏任务执行完后立即执行。

4.3 async/await

在 ES8（2017年） 引入的 async/await 进一步简化了异步代码的编写。async/await 是 Promise 的语法糖，它允许以同步的方式写异步代码，同时保持异步非阻塞的行为。

 async function fetchData() {
   const data = await new Promise((resolve) => {
     setTimeout(() => {
       resolve('Data fetched');
     }, 1000);
   });
   console.log(data);  // 同步风格写法，实际是异步非阻塞执行
 }
 ​
 fetchData();

虽然 async/await 让异步代码看起来像是同步执行，但底层依然是基于Promise和事件循环的机制，异步任务会在事件循环中调度执行，不会阻塞主线程。

4.4. JavaScript 单线程与 Web Worker

为了应对单线程带来的性能瓶颈，HTML5 引入了Web Workers，允许在后台创建多线程来处理复杂的任务，而不会阻塞主线程。虽然 Web Workers 允许在后台并行执行代码，但它们和主线程是相互独立的，不能直接操作 DOM。

示例：使用 Web Worker
 const worker = new Worker('worker.js');  // 创建一个 Web Worker
 worker.onmessage = function(e) {
   console.log('Message from Worker:', e.data);
 };
 ​
 // worker.js 文件
 onmessage = function(e) {
   const result = e.data * 2;  // 对传入的数据进行处理
   postMessage(result);        // 将结果发送回主线程
 };

Web Workers 提供了一种方式来在后台执行任务，避免阻塞主线程，但它们与主线程通信需要通过消息传递，无法直接访问主线程的资源（如 DOM）。

5. 同步阻塞与异步非阻塞与事件循环的关系

  • 同步阻塞：

    • 在同步任务执行过程中，JavaScript 只有一个主线程，如果某个任务需要等待（如 I/O 操作），JavaScript 会阻塞后续代码的执行。

  • 异步非阻塞：

    • JavaScript 引入了异步非阻塞模式，使得异步任务可以在后台运行，而不阻塞主线程。异步任务完成后通过事件循环处理回调或 Promise，不影响主线程的继续运行。

  • 事件循环：

    • 事件循环是 JavaScript 异步非阻塞机制的核心。它使得 JavaScript 可以在单线程的基础上执行异步任务，通过任务队列调度异步任务的执行。所有异步任务，如 setTimeout、Promise 等，都会通过事件循环机制来管理执行顺序，确保任务不会阻塞主线程。

6. 总结：JavaScript 异步机制与同步/异步执行模式的关系

  • 同步阻塞是 JavaScript 的默认执行模式，所有代码按顺序执行，如果有阻塞任务，主线程会暂停，直到任务完成。

  • 异步非阻塞是为了解决 JavaScript 单线程中处理 I/O、定时器等长时间任务时的阻塞问题。通过事件循环，JavaScript 能够在不阻塞主线程的情况下处理这些任务，并在任务完成后执行回调函数或 Promise，保持代码流畅执行。

  • 事件循环是 JavaScript 异步机制的核心，它使得异步任务可以被调度执行，从而实现异步非阻塞的执行模式。

  • 异步机制的演进：

    • 回调函数（Callback） ：最早的异步实现方式，但容易导致回调地狱。
    • Promise（ES6） ：链式调用异步任务，解决回调地狱问题，底层依赖事件循环。
    • async/await（ES8） ：基于 Promise 的语法糖，简化异步代码写法，使异步任务看起来像同步代码执行。

JavaScript 的同步阻塞与异步非阻塞的执行模式与JavaScript 的异步机制密切相关，它们共同构成了 JavaScript 处理异步任务的核心

avatar
文章
阅读
粉丝