Web Worker 使用教程
💡
原文中文，约8000字，阅读约需19分钟。
📝
内容提要
JavaScript采用单线程模型，Web Worker可以创建多线程环境，实现任务分配和后台运行，通过消息通信。Worker线程不能执行alert()和confirm()方法，但可以使用XMLHttpRequest对象发出AJAX请求。Worker线程无法读取本地文件，必须来自网络。主线程通过worker.postMessage()方法向Worker发送消息，Worker通过self.onmessage指定监听函数接收消息。Worker线程内部可以加载其他脚本，使用importScripts()方法。Worker线程可以新建Worker线程。
🎯
关键要点
- JavaScript 采用单线程模型，Web Worker 提供多线程环境。
- Worker 线程可以在后台运行，主线程不受阻塞。
- Worker 线程不能执行 alert() 和 confirm() 方法，但可以使用 XMLHttpRequest 进行 AJAX 请求。
- Worker 线程无法读取本地文件，脚本必须来自网络。
- 主线程通过 worker.postMessage() 向 Worker 发送消息，Worker 通过 self.onmessage 接收消息。
- Worker 线程可以加载其他脚本，使用 importScripts() 方法。
- Worker 线程可以新建 Worker 线程，但需注意资源消耗。
- Worker 线程与主线程之间的通信是通过消息完成的，不能直接通信。
- Worker 线程无法访问 DOM 对象，但可以访问 navigator 和 location 对象。
- Worker 线程的脚本文件必须与主线程同源。
- 主线程可以监听 Worker 的错误事件。
- Worker 线程内部可以使用 self.close() 关闭自身。
- 主线程与 Worker 之间的通信是拷贝关系，Worker 对数据的修改不会影响主线程。
- 可以通过 Transferable Objects 直接转移二进制数据，避免性能问题。
- Worker 可以加载同一网页中的脚本，需指定 type 属性为不被识别的值。
- Worker 线程可以实现轮询功能，定期检查服务器状态。
- Worker 线程内部可以新建其他 Worker 线程，适用于计算密集型任务。
- Worker() 构造函数用于创建 Worker 线程，支持传递配置对象。
- Worker 线程有自己的全局对象，不能使用主线程的 window 对象。
🏷️
标签
➡️
