提升用户体验方案之Web Worker—Worker1
内容提要
Web Worker是JavaScript的一个特性，允许在后台执行复杂和耗时的任务，而不阻塞主线程。它通过消息传递与主线程通信，提供了改善用户体验的方式。有三种类型的workers：Worker、SharedWorker和ServiceWorker，适用于不同的场景。文章还解释了如何创建和使用workers，以及主线程和worker线程之间可以传递的数据类型。它提供了使用workers进行上传大文件、处理用户输入和导出Excel文件等任务的实际示例。
延伸解读
Web Worker 的适用边界与性能权衡
文章指出 Web Worker 是较重的 API，对浏览器有一定负担，建议仔细分析场景是否真正需要。它适合大量计算、耗时操作，如大文件切片、复杂输入处理、导出 Excel 等，能避免主线程阻塞。但若任务简单或频繁创建销毁 Worker，反而可能增加开销。因此，在决定使用前，应评估任务的计算量和频率，确保收益大于成本。
主线程与 Worker 线程的关闭行为差异
文章通过示例说明，在主线程调用 terminate() 会立即断开连接，即使 Worker 当前事件循环中还有任务，主线程也不再接收后续消息。而在 Worker 内部调用 close()，会等当前事件循环的所有任务（包括微任务）执行完，期间发送的消息主线程仍能收到。这一差异影响资源清理和消息可靠性，开发者需根据场景选择合适的关闭方式。
数据传递的限制与结构化克隆
postMessage() 传递的是值的拷贝而非引用，且基于结构化克隆算法。这意味着不能传递函数、DOM 节点、Error 对象，某些属性如 RegExp 的 lastIndex 也不会保留。支持的类型包括基本类型、Date、RegExp、Map、Set、ArrayBuffer 等。若传递无法序列化的数据，会触发 messageerror 事件。了解这些限制有助于避免运行时错误，并合理设计线程间通信的数据格式。
Worker 全局环境的特殊性与能力
Worker 线程运行在独立的全局作用域中，顶层对象是 self，无法访问 window、document 和 DOM，也不能使用 localStorage 和 sessionStorage。但可以通过 WorkerGlobalScope 使用 setTimeout、setInterval、fetch、IndexedDB 等。此外，location 和 navigator 以只读形式提供。这些特性决定了 Worker 适合纯计算和网络请求，而不适合直接操作界面。
Q&A
Web Worker 是什么？
Web Worker 是 JavaScript 的一个特性，允许在后台执行复杂和耗时的任务，而不阻塞主线程。
Web Worker 有哪几种类型？
Web Worker 分为三种类型：Worker、SharedWorker 和 ServiceWorker，适用于不同的场景。
如何创建一个 Web Worker？
创建 Worker 实例使用 Worker(...) 结构，传入脚本地址和可选参数。
Web Worker 如何与主线程通信？
主线程与 Worker 线程通过 postMessage 方法进行数据传递，传递的是值而非引用。
Web Worker 的实际应用场景有哪些？
实际应用场景包括大文件切片上传、用户输入内容重塑和导出 Excel 文件等。
Web Worker 线程如何处理错误？
Worker 线程可以监听错误信息，包括 error 和 messageerror 事件。
