現代應用程序要求高性能和響應性，這要求開發者掌握并發和并行。TypeScript 作為 JavaScript 的超集，提供了強大的工具和模式來管理這些復雜性。本指南從各個角度探討這兩個概念，深入實際示例、模式和高級實踐，以利用 TypeScript 中的并發和并行。
并發與并行：關鍵區別
在深入代碼之前，理解這些術語至關重要：
1.并發：
- 定義：系統通過交錯執行多個任務的能力（不一定是同時進行）。
2.并行：
可視化：
想象一個餐廳：
TypeScript 中的并發
JavaScript，以及擴展的 TypeScript，運行在單線程事件循環上，這可能使得并發聽起來不可能實現。然而，通過異步編程模型如回調、承諾和async/await實現了并發。
1. 使用 Promise 實現并發
Promises 是在 TypeScript 中實現并發的最簡單方式之一。
const fetchData = (url: string) => {
returnnewPromise<string>((resolve) => {
setTimeout(() => resolve(`Data from ${url}`), 1000);
});
};
const main = async () => {
console.log('Fetching data concurrently...');
const data1 = fetchData('https://api.example.com/1');
const data2 = fetchData('https://api.example.com/2');
const results = awaitPromise.all([data1, data2]);
console.log(results); // ["Data from https://api.example.com/1", "Data from https://api.example.com/2"]
};
main();
解釋：
Promise.all 允許兩個獲取操作并發運行，節省時間。
2. 使用 Async/Await 實現并發
async/await 在保持異步特性的同時簡化了 promise 鏈。
async function task1() {
console.log("Task 1 started");
awaitnewPromise((resolve) => setTimeout(resolve, 2000));
console.log("Task 1 completed");
}
asyncfunction task2() {
console.log("Task 2 started");
awaitnewPromise((resolve) => setTimeout(resolve, 1000));
console.log("Task 2 completed");
}
asyncfunction main() {
console.log("Concurrent execution...");
awaitPromise.all([task1(), task2()]);
console.log("All tasks completed");
}
main();
TypeScript 中的并行
雖然 JavaScript 本身不支持多線程，但 Web Workers 和 Node.js Worker Threads 啟用了并行。這些特性利用單獨的線程來處理計算密集型任務。
1. Web Workers 實現并行
在瀏覽器環境中，Web Workers 在單獨的線程中執行腳本。
// worker.ts
addEventListener('message', (event) => {
const result = event.data.map((num: number) => num * 2);
postMessage(result);
});
// main.ts
const worker = new Worker('worker.js');
worker.onmessage = (event) => {
console.log('Result from worker:', event.data);
};
worker.postMessage([1, 2, 3, 4]);
2. Node.js Worker Threads 實現并行
對于服務器端應用程序，Node.js 提供了worker_threads。
// worker.js
const { parentPort } = require('worker_threads');
parentPort.on('message', (data) => {
const result = data.map((num) => num * 2);
parentPort.postMessage(result);
});
// main.js
const { Worker } = require('worker_threads');
const worker = new Worker('./worker.js');
worker.on('message', (result) => {
console.log('Worker result:', result);
});
worker.postMessage([1, 2, 3, 4]);
有效并發與并行的模式
1. 任務隊列管理并發
在處理許多任務時，任務隊列確保受控執行。
class TaskQueue {
private queue: (() =>Promise<void>)[] = [];
private running = 0;
constructor(private concurrencyLimit: number) {}
enqueue(task: () =>Promise<void>) {
this.queue.push(task);
this.run();
}
private async run() {
if (this.running >= this.concurrencyLimit || this.queue.length === 0) return;
this.running++;
const task = this.queue.shift();
if (task) await task();
this.running--;
this.run();
}
}
// 使用
const queue = new TaskQueue(3);
for (let i = 0; i < 10; i++) {
queue.enqueue(async () => {
console.log(`Task ${i} started`);
awaitnewPromise((resolve) => setTimeout(resolve, 1000));
console.log(`Task ${i} completed`);
});
}
2. 使用工作池進行負載均衡
工作池高效地在多個工作線程之間分配任務。
import { Worker, isMainThread, parentPort, workerData } from'worker_threads';
if (isMainThread) {
const workers = Array.from({ length: 4 }, () => new Worker(__filename));
const tasks = [10, 20, 30, 40];
workers.forEach((worker, index) => {
worker.postMessage(tasks[index]);
worker.on('message', (result) => console.log('Result:', result));
});
} else {
parentPort.on('message', (task) => {
parentPort.postMessage(task * 2);
});
}
挑戰與解決方案
- 使用 Node.js 中的 async_hooks 等工具來追蹤異步操作。
- 使用支持調試 async/await 代碼的 IDE。
- 將 promise 包裝在 try/catch 塊中，或與 Promise.all 一起使用 .catch()。
并發與并行的最佳實踐
- 優先考慮異步 I/O：避免在 I/O 密集型操作中阻塞主線程。
- 為 CPU 密集型任務使用工作線程：將重計算卸載到工作線程或 Web Workers。
- 限制并發：使用任務隊列或 p-limit 等庫來控制并發級別。
- 利用庫：使用 Bull 等庫進行任務隊列管理，或使用 Workerpool 進行工作線程管理。
結論
并發和并行對于構建高性能、可擴展的 TypeScript 應用程序至關重要。并發通過交錯任務提高響應性，而并行則在多核系統上實現同時執行。通過掌握這些概念，開發者可以應對現代應用程序中的挑戰，并提供無縫的用戶體驗。
?原文地址：https://dev.to/shafayeat/mastering-concurrency-and-parallelism-in-typescript-1bgf
該文章在 2024/12/30 12:41:54 編輯過
400 186 1886
