web worker 不能直接抓取网页数据，只能处理主线程已获取的同源html、本地文件或代理返回的内容；主线程负责合规获取，worker专注domparser解析、seo分析等后台批量处理。
Web Worker 本身不能直接抓取网页数据（比如用 fetch 加载其他网站的 HTML），但它可以安全、高效地处理**已获取的网页原始内容**——比如从同源 API、本地文件或预加载的 HTML 字符串中拿到的数据。所谓“后台批量处理网页数据抓取”，准确说是：主线程负责合规获取（fetch / FileReader），Worker 负责后台解析、清洗、结构化、去重、SEO 分析等高开销逻辑，全程不卡 UI。
先由主线程完成合法“抓取”
浏览器同源策略和 CORS 限制决定了 Worker 无法绕过权限直接拉取任意网页。所以第一步必须在主线程完成：
- 对同源页面：用
fetch('/page.html')获取原始 HTML 字符串（服务端需允许） - 对用户上传文件：用
FileReader.readAsText()或.readAsArrayBuffer()读取本地 HTML 文件 - 对远程跨域页面（如检测第三方站点 SEO）：必须经后端代理中转，前端只 fetch 自己域名下的接口，返回已抓好的 HTML 内容
- 禁止在 Worker 或主线程中尝试
iframe.contentDocument或document.write模拟抓取——这既不安全也不可靠
Worker 内专注结构化解析与批量分析
拿到 HTML 字符串后，Worker 就能发挥真正价值：用 DOMParser 构建轻量文档对象，逐项提取、校验、归一化。例如处理 100 个页面快照：
- 每批次传入 5–20 个 HTML 字符串（避免单次消息过大），格式如：
{ id: 'page-42', html: '...' } - Worker 内循环调用
new DOMParser().parseFromString(html, 'text/html')，不挂载、不渲染，仅查询 - 批量提取关键字段：
<title></title>、<meta name="description">、<h1></h1>数量、图片alt缺失率、canonical是否有效 - 对文本内容做轻量归一化：去空格、转小写、截取前 300 字，用于相似度比对或去重
- 结果统一返回结构化数组：
[{ id: 'page-42', title: 'xxx', issues: ['missing-h1'], score: 72 }]
通信优化：避免卡顿的关键细节
批量处理容易因消息体积或频率引发性能问题，需主动控制：
- 不用 JSON.stringify 大 HTML 字符串反复传输；改用主线程一次读完，再
postMessage({ batch: [...] })整体发送 - HTML 字符串超过 1MB 时，考虑用
TextEncoder.encode()转成Uint8Array，配合transfer零拷贝传递（仅限 ArrayBuffer 类型） - 不要为每个页面单独发一条消息；合并批次 + 统一回调，减少主线程事件循环压力
- Worker 内加简单计时：若单页解析超 300ms，记录警告并跳过深度分析，保障整体吞吐
典型流程示意（主线程 + Worker 协作）
假设你要批量分析一组 CMS 页面的 SEO 健康度：
- 主线程发起 fetch 请求，从
/api/pages?ids=1,2,3,4,5拿到含 HTML 字符串的 JSON 数组 - 切分成每组 3 个页面，调用
worker.postMessage({ type: 'analyze-seo', pages: [...] }) - Worker 解析每个
html字段，生成{ url, titleLen, hasCanonical, imgAltRate, issues[] } - 主线程收到后更新表格行、标红问题项，不刷新整个列表，也不阻塞滚动
- 全部完成，触发导出 CSV 按钮可用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
