Worker无法直接读取DOM，因运行在独立线程且无DOM API权限；正确做法是主线程采集几何数据后通过postMessage传给Worker进行纯计算统计。
直接在主线程遍历数千个DOM节点并调用 getBoundingClientRect() 或 offsetWidth 等属性，会严重阻塞渲染和交互，导致页面卡顿甚至无响应。Worker 本身无法访问 DOM，因此不能直接操作或读取 DOM 节点——这是关键前提。真正的解法是：**主线程采集必要数据后传递给 Worker，由 Worker 进行纯计算型统计**。
为什么 Worker 不能直接读 DOM？
Web Worker 运行在独立线程，与 window、document 完全隔离，没有 DOM API 权限。尝试在 Worker 中访问 document 或调用 getBoundingClientRect 会直接抛出 ReferenceError 或 TypeError。任何“让 Worker 统计 DOM”的方案，第一步必然是主线程完成 DOM 读取。
分步实现：主线程采集 + Worker 计算
以统计所有 .item 元素的宽度分布（如：0–100px、100–200px…）为例：
-
主线程：用
document.querySelectorAll('.item')获取 NodeList，遍历调用el.getBoundingClientRect()，提取width、height、top、left等数值，打包为轻量数组（例如[{w: 124.5, h: 88, t: 42.3}, ...]），通过postMessage()发送给 Worker -
Worker 文件（stats-worker.js）：接收数据后，用纯 JS 做分桶统计（如用
Math.floor(w / 100)归类），生成频次对象{'0': 12, '1': 47, '2': 31, ...}，再postMessage回主线程 -
注意传输效率：避免传入元素引用、
ClientRect实例等不可序列化对象；只传原始数字或简单对象。NodeList 需转为数组并映射为纯数据，否则postMessage会失败
优化细节：减少主线程压力
即使只是读取几何属性，对数千节点批量调用 getBoundingClientRect() 仍可能触发强制同步布局（layout thrashing）。可进一步优化：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 使用
requestIdleCallback()分批采集，每帧处理 50–100 个节点，避免长任务 - 若只需相对位置（如是否在视口内），可用
IntersectionObserver异步获取，再汇总发给 Worker - 对样式一致的节点组（如同一 class），可采样统计后推算，无需全量遍历
完整代码片段（简化版）
主线程：
const worker = new Worker('stats-worker.js');
const items = Array.from(document.querySelectorAll('.item'));
const geometryData = items.map(el => {
const r = el.getBoundingClientRect();
return { w: r.width, h: r.height, t: r.top, l: r.left };
});
worker.postMessage({ type: 'ANALYZE', data: geometryData });
worker.onmessage = e => {
if (e.data.type === 'RESULT') console.log('宽度分布:', e.data.distribution);
};
stats-worker.js：
self.onmessage = e => {
if (e.data.type !== 'ANALYZE') return;
const bins = {};
for (const { w } of e.data.data) {
const bucket = Math.floor(w / 100);
bins[bucket] = (bins[bucket] || 0) + 1;
}
self.postMessage({ type: 'RESULT', distribution: bins });
};
