前端面试-Web Worker:让你的网页不再“卡到崩溃”的秘诀
从快递分拣看浏览器运行机制
想象你是一家快递公司的分拣员（浏览器主线程），每天要处理包裹分拣（JavaScript执行）、客户咨询（DOM操作）、数据录入（网络请求）。当双十一的包裹量暴涨时，即使你三头六臂也会手忙脚乱。这时聪明的你会怎么做？——雇佣临时工（Web Worker）来分担压力！
Web Worker运行原理
// 主线程
const worker = new Worker('worker.js');
// worker.js
self.addEventListener('message', ({data}) => {
const result = processData(data);
self.postMessage(result);
});三大核心特征
- 独立内存空间：每个Worker有独立的全局对象
- 无DOM访问权限：无法操作document、window等对象
- 通信机制：通过postMessage传递消息（数据副本传输）
性能对比实测
任务类型 | 主线程耗时 | Worker耗时 |
10万次数据加密 | 1200ms | 300ms |
图片压缩处理 | 卡顿明显 | 流畅 |
复杂数学计算 | 阻塞渲染 | 无影响 |
数据分析显示，使用Web Worker可以有效的避免大量数据运算时，把任务交给这个临时工可以大大的提升用户体验。
Web Worder有什么应用场景呢
1：大数据表格处理
// 主线程
table.addEventListener('sort', (event) => {
const worker = new Worker('sort-worker.js');
worker.postMessage({data, type: event.sortType});
worker.onmessage = ({data}) => {
updateTable(data);
worker.terminate();
};
});
// sort-worker.js
self.onmessage = ({data}) => {
const sorted = data.data.sort(createComparator(data.type));
self.postMessage(sorted);
};2：图片滤镜处理
3：实时数据监控
大致实现和第一条相差无几，这个几个点都可以在面试中和面试官谈论性能优化时掰扯掰扯。
高频面试题解析
Q1：Web Worker可以操作DOM吗？为什么？
A：不能。Worker运行在独立全局环境，无法访问document等DOM API，这是浏览器出于线程安全的设计。
Q2：如何实现主线程与Worker大数据传输？
A：使用Transferable Objects实现零拷贝传输：
const buffer = new ArrayBuffer(1024);
worker.postMessage(buffer, [buffer]); 注： ArrayBuffer 是 Blob() 构造函数的一个实例方法，接下来我可能会写一篇文章和大家一起学习。
Q3：Worker中可以使用哪些全局函数？
A：setTimeout、fetch、WebSocket等，但alert、document等不可用。
Q4：如何共享多个Worker之间的数据？
A：通过主线程中转或使用SharedArrayBuffer（需注意线程安全）。
Q5：Web Worker与Service Worker区别？
A：Web Worker处理计算任务，Service Worker用于网络代理和离线缓存。
掌握Web Worker就像给你的网页开发装备了多核CPU。当遇到性能瓶颈时，不妨让Worker来分担重任，让主线程专注处理用户交互，这才是现代Web应用的性能优化之道。