_04_事件循环

单线程优缺点

JavaScript 的单线程执行机制是其核心特性之一，这一机制最初是为了简化浏览器端的DOM操作而设计的，避免了多线程下复杂的锁机制和同步问题。下面详细分析其优缺点：

一、优点

简化编程模型，降低复杂度
单线程无需处理多线程环境下的资源竞争、死锁、线程同步等问题，开发者不需要关心线程间通信和状态同步，代码逻辑更简单直观。
例如：在操作DOM时，不用担心多个线程同时修改DOM导致的冲突（如一个线程删除元素，另一个线程同时修改该元素）。
避免多线程的性能开销
多线程需要操作系统分配资源、管理线程上下文切换，这些操作会消耗额外的内存和CPU资源。单线程减少了这些开销，在简单场景下执行效率更高。
与浏览器DOM操作天然契合
浏览器的DOM是共享资源，单线程模型保证了DOM操作的原子性，避免了多线程并发修改DOM可能导致的渲染异常或数据不一致。

二、缺点

耗时操作会阻塞主线程
单线程中，所有任务按顺序执行。如果遇到耗时操作（如大量计算、未优化的循环、同步网络请求），会阻塞后续任务执行，导致页面卡顿、失去响应。
例如：

javascript

// 耗时操作会阻塞页面
function heavyTask() {
  let sum = 0;
  for (let i = 0; i < 1000000000; i++) {
    sum += i;
  }
  return sum;
}

console.log('开始');
heavyTask(); // 执行时间过长，阻塞后续代码
console.log('结束'); // 需等待上面任务完成后才会执行

无法充分利用多核CPU
单线程只能占用一个CPU核心，即使在多核处理器环境下，也无法通过并行计算提高效率，对CPU密集型任务（如大数据处理）不友好。
异步编程增加复杂度
为了避免主线程阻塞，JS通过异步回调、Promise、async/await等方式处理耗时操作（如网络请求、定时器），但复杂的异步逻辑可能导致“回调地狱”或代码可读性下降。
例如：
javascript
```
// 多层嵌套的异步回调（回调地狱）
fetchData1(() => {
  fetchData2(() => {
    fetchData3(() => {
      // 多层嵌套导致代码难以维护
    });
  });
});
```

三、如何弥补单线程的不足？

JS通过以下机制在单线程模型下优化性能：

事件循环（Event Loop）：区分同步任务和异步任务，异步任务（如网络请求、定时器）完成后通过回调进入任务队列，等待主线程空闲时执行，避免阻塞。
Web Workers：将CPU密集型任务交给独立的Worker线程执行，主线程与Worker线程通过消息通信，实现“伪多线程”（但Worker不能操作DOM）。
异步API：使用Promise、async/await等语法糖简化异步逻辑，避免回调地狱。

总结

JS单线程的设计是权衡后的选择：优点在于简化DOM操作和编程模型，缺点是无法并行处理任务、易被耗时操作阻塞 。实际开发中，需合理利用异步机制和Web Workers，在单线程模型下最大化性能。

Web Worker 示例：后台处理数据

Web Worker 允许在后台线程中运行脚本，避免阻塞主线程，特别适合处理 CPU 密集型任务。以下是详细的 API 说明和示例代码。

Web Worker 核心 API 概述

主线程 API	描述
`new Worker(scriptURL)`	创建 Worker 实例，参数为 Worker 脚本路径
`worker.postMessage(data)`	向 Worker 发送数据（可序列化的数据：对象、数组、基本类型等）
`worker.onmessage`	监听 Worker 发送的消息（回调函数接收 `event.data`）
`worker.onerror`	监听 Worker 中的错误（回调接收 `event` 包含错误信息）
`worker.terminate()`	立即终止 Worker，释放资源

Worker 线程 API	描述
`self.postMessage(data)`	向主线程发送数据
`self.onmessage`	监听主线程发送的消息（回调函数接收 `event.data`）
`self.onerror`	监听自身错误
`self.close()`	主动终止当前 Worker

Web Worker 完整示例

场景说明

实现一个需求：在前端对大量数据进行复杂计算（如筛选、排序、统计），同时不阻塞主线程的 UI 交互（如按钮点击、输入框输入）。

1. 主线程代码（`index.html`）

html

<!DOCTYPE html>
<html>
<head>
    <title>Web Worker Demo</title>
    <style>
        #result {
            white-space: pre-wrap;
        }

        .container {
            margin: 20px;
        }

        button {
            padding: 8px 16px;
            margin-right: 10px;
        }

        input {
            padding: 8px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
<div class="container">
    <h3>Web Worker 数据处理示例</h3>
    <button id="startBtn">开始处理数据</button>
    <button id="stopBtn">终止处理</button>
    <p>主线程状态：<span id="mainStatus">空闲</span></p>
    <p>输入测试（验证主线程是否阻塞）：<input type="text" placeholder="在此输入文字"></p>
    <h4>处理结果：</h4>
    <div id="result"></div>
</div>

<script>
    // 创建 Worker 实例（指定 Worker 脚本路径）
    const dataWorker = new Worker('worker.js');
    const startBtn = document.getElementById('startBtn');
    const stopBtn = document.getElementById('stopBtn');
    const mainStatus = document.getElementById('mainStatus');
    const resultDiv = document.getElementById('result');

    // 点击"开始处理"按钮：向 Worker 发送任务
    startBtn.addEventListener('click', () => {
        mainStatus.textContent = '处理中...';
        resultDiv.textContent = '正在计算，请等待...';

        // 生成100万个随机数作为测试数据
        const testData = Array.from({length: 1000000}, () => Math.random() * 10000);

        // 向 Worker 发送数据（包含要处理的数据和配置）
        dataWorker.postMessage({
            data: testData,
            threshold: 5000 // 筛选出大于5000的值
        });
    });

    // 监听 Worker 返回的结果
    dataWorker.onmessage = (event) => {
        mainStatus.textContent = '处理完成';
        // 显示处理结果（统计信息和前10条筛选结果）
        resultDiv.textContent = `
        总数据量：${event.data.totalCount}条
        符合条件的数据量：${event.data.filteredCount}条
        平均值：${event.data.average.toFixed(2)}
        前10条结果：${event.data.top10.join(', ')}
      `;
    };

    // 监听 Worker 错误
    dataWorker.onerror = (error) => {
        mainStatus.textContent = '处理出错';
        resultDiv.textContent = `错误：${error.message}（行号：${error.lineno}）`;
        // 阻止错误冒泡到全局
        error.preventDefault();
    };

    // 点击"终止处理"按钮：终止 Worker
    stopBtn.addEventListener('click', () => {
        dataWorker.terminate();
        mainStatus.textContent = '已终止';
        resultDiv.textContent = '处理已被终止';
    });
</script>
</body>
</html>

2. Worker 线程代码（`worker.js`）

javascript

// 监听主线程发送的消息
self.onmessage = (event) => {
    const {data, threshold} = event.data;

    try {
        // 步骤1：筛选出大于threshold的值（CPU密集型操作）
        const filteredData = data.filter(item => item > threshold);

        // 步骤2：排序（进一步消耗CPU）
        filteredData.sort((a, b) => b - a);

        // 步骤3：计算平均值
        const sum = filteredData.reduce((acc, item) => acc + item, 0);
        const average = sum / filteredData.length;

        // 步骤4：取前10条结果
        const top10 = filteredData.slice(0, 10);

        // 向主线程返回处理结果
        self.postMessage({
            totalCount: data.length,
            filteredCount: filteredData.length,
            average,
            top10
        });

        // 完成后主动关闭 Worker（可选）
        self.close();
    } catch (error) {
        // 向主线程发送错误信息
        self.postMessage({error: error.message});
    }
};

// Worker 内部错误监听（可选）
self.onerror = (error) => {
    console.error(`Worker 错误：${error.message}`);
    error.preventDefault();
};

运行说明与注意事项

运行方式：
Web Worker 不能通过 file:// 协议直接运行（会有跨域限制），需通过本地服务器（如 http-server、live-server）运行，例如：
bash
```
# 安装简易服务器（需Node.js环境）
npm install -g http-server
# 在文件目录启动服务器
http-server
```
然后访问 http://localhost:8080 即可。
核心特点：
- 运行示例时，点击"开始处理"后，可在输入框中正常输入文字，证明主线程未被阻塞。
- Worker 无法操作 DOM、window 对象，只能通过 postMessage 与主线程通信。
- 数据传递是复制而非共享（大数据会有性能开销），可使用 Transferable Objects 优化二进制数据传递。
适用场景：
- 大数据筛选、排序、统计（如日志分析）
- 复杂数学计算（如图形学、加密解密）
- 周期性数据处理（如实时数据监控）

通过这个示例，可以清晰看到 Web Worker 如何在不阻塞主线程的情况下处理耗时任务，显著提升前端应用的响应性能。

_04_事件循环 ​

单线程优缺点 ​

一、优点 ​

二、缺点 ​

三、如何弥补单线程的不足？ ​

总结 ​

Web Worker 示例：后台处理数据 ​

Web Worker 核心 API 概述 ​

Web Worker 完整示例 ​

场景说明 ​

1. 主线程代码（index.html） ​

2. Worker 线程代码（worker.js） ​

运行说明与注意事项 ​