Web Worker 中无法使用 querySelector，因 document 对象根本不存在；应将 DOM 查询留在主线程，Worker 仅处理结构化数据或用 DOMParser 解析 HTML 字符串。
不能在 Web Worker 中运行 querySelector，因为它根本没加载 DOM——document 对象在 Worker 全局作用域里压根不存在，不是“还没准备好”，而是彻底不可用。想绕开这个限制，关键不是找替代 API，而是重构数据流和职责分工。
把 DOM 查询逻辑留在主线程，只传结构化数据给 Worker
Worker 不该接触 HTML 字符串或真实节点，但可以处理已解析好的纯数据。常见做法是：
- 主线程用
querySelectorAll拿到元素集合，再用Array.from()转成数组，提取需要的字段（如textContent、dataset.id、getAttribute('src')） - 把精简后的 JSON 可序列化对象（例如
[{id: 1, title: "xxx"}, ...]）通过postMessage发给 Worker - Worker 做过滤、排序、搜索、分页等纯计算，结果再发回主线程
对 HTML 字符串做离线解析（不依赖真实 DOM）
如果 Worker 收到的是 HTML 片段字符串（比如从接口返回的列表 HTML），可以用 DOMParser 在内存中构造虚拟文档：
const doc = new DOMParser().parseFromString(htmlStr, 'text/html')- 之后可安全调用
doc.querySelectorAll(selector)、doc.querySelector等方法 - 注意：返回的是
HTMLDocument实例，不是页面真实 DOM，不能绑定事件或触发渲染 - 适合做内容抽取、结构校验、预处理，不适合样式计算或布局测量
用 OffscreenCanvas 或 CustomEvent 解耦高频操作
当涉及大量动态内容生成（如无限滚动列表、实时图表），单纯传数据仍可能造成主线程压力。这时可结合：
- OffscreenCanvas：主线程创建后移交至 Worker，Worker 直接绘图，再传回图像帧，完全避开 DOM
-
CustomEvent + 状态抽象：Worker 只发
{ type: 'ITEM_FILTERED', payload: [...] }这类消息；主线程监听后，由 UI 层（如 React 组件、自定义元素）决定如何更新 DOM，实现关注点分离
避免踩坑的硬性提醒
以下操作在 Worker 中一律无效，不要尝试：
- 调用
document.querySelector、document.getElementById—— 报ReferenceError: document is not defined - 使用 jQuery 或任何基于 DOM 的库 —— 它们内部强依赖
document和window - 试图用
localStorage或sessionStorage—— 同样未定义，且同步读写会阻塞 Worker - 传函数、正则、Date、DOM 节点、
this引用等非可克隆对象 ——postMessage会静默丢弃或报错
