Web Worker：前端后台线程与性能优化
一、什么是 Web Worker？
1、为什么需要 web worker
JavaScript 是'单线程'的，就像一个工人（主线程）同时只能做一件事：你让他'画页面'，他就画；你让他'算数据'，他就算；你同时让他画又让他算，他会傻住（页面卡死）。
Web Worker 的作用就相当于给 JavaScript 请了多个打工人（Worker）来做那些不需要碰 UI 的任务。
2、什么是 web worker
Web Worker 就是浏览器为 JavaScript 提供的一种'开小号干活'的机制，帮主线程分担计算任务，避免卡顿。
简单来说：
Web Worker = 浏览器中的子线程。
它能让我们把耗时操作（比如复杂计算、数据处理）丢到后台执行，主线程只负责 UI 渲染和交互，两边互不打扰。
- Worker 无法直接操作 DOM。
- Worker 和主线程靠 postMessage 通信。
- Worker 是完全独立的执行环境，有自己的全局作用域。
总结来说就是能并行执行代码，不会卡住界面，并且通信机制简单的机制，常用来解决重 CPU 运算（算力密集型）的前端任务，比如很久以前有个可以用来计算阴阳师限定条件下最佳的御魂配置的网站，它就需要多线程进行海量数据运算，网页需要设置计算机的核心数来获取最快的计算速度，就绕不开使用 Web Worker（或其他实现前端并行计算能力的技术）。
二、基本使用方法
来看一个最简单的 Web Worker 例子。
1、创建一个 Worker 文件（worker.js）
// worker.js
self.onmessage = function(e) {
console.log('子线程收到：', e.data);
const result = heavyComputation(e.data);
self.postMessage(result); // 把结果发回主线程
};
function heavyComputation(input) {
// 模拟一个超耗时的计算
let sum = 0;
for (let i = 0; i < 1e9; i++) {
sum += input;
}
return sum;
}
2、主线程引入并使用
const worker = new Worker('worker.js');
worker.();
worker. = () {
.(, e.);
};
