HTML5中Worker做资源分析的核心是将高开销逻辑移出主线程。Worker可处理主线程传入的memory快照、序列化资源数据、DOM结构统计及定时负载模拟；不可直接访问document或performance.memory等API，须由主线程主动传递JSON或Transferable数据，Worker仅计算并回传结构化报告，主线程负责展示与终止。
在HTML5中用Worker做网页资源占用分析，核心是把高开销的采集、计算、聚合逻辑移出主线程，避免干扰用户操作和页面渲染。这类分析通常涉及内存使用、脚本执行时长、资源加载耗时、DOM节点数量等指标，主线程直接统计容易引发卡顿甚至假死。
明确哪些指标适合Worker采集
Worker无法访问document、window.performance.memory（部分浏览器不暴露）、performance.getEntries()（需主线程调用），所以不能“全量抓取”。真正可由Worker承担的是：
- 接收主线程传入的
performance.memory快照（如Chrome中可用，主线程读取后通过postMessage传入） - 解析并归类主线程传来的
performance.getEntriesByType('resource')或'navigation'数据（已序列化为数组） - 对大量DOM结构数据（如节点树扁平化后的JSON）做深度遍历、层级统计、重复ID/className检测
- 模拟长期运行的定时采样逻辑（例如每5秒计算一次当前Worker内虚拟任务队列积压量，作为间接负载参考）
主线程如何安全传递原始数据给Worker
关键不是“Worker去查”，而是“主线程主动给”。推荐流程如下：
- 主线程用
performance.memory（如有）、performance.getEntries()、document.querySelectorAll('*').length等生成轻量摘要对象 - 将结果转为纯JSON或TypedArray（如用
Uint32Array存各资源加载耗时毫秒值），避免嵌套函数或DOM引用 - 调用
worker.postMessage(data, [transferList])，对大型数组Buffer启用Transferable（零拷贝） - 例如：
worker.postMessage({ type: 'snapshot', mem: { usedJSHeapSize, totalJSHeapSize }, resources: entries }, [entries.buffer])
Worker内部做分析与反馈的设计要点
Worker脚本（如analyzer.worker.js）应聚焦计算，不渲染、不请求、不操作任何UI：
立即学习“前端免费学习笔记（深入）”；
- 用
self.onmessage接收数据，校验data.type区分不同分析任务 - 对资源列表按域名、类型（js/css/img）、状态码分组，计算平均加载时间、最大阻塞时间
- 识别超大JS文件（>500KB）、重复加载的相同URL、未压缩文本资源
- 发现异常模式后，构造结构化报告对象（如
{ warning: '3个script加载超2s', details: [...] }），用self.postMessage()回传 - 捕获错误并主动上报：
self.onerror = e => self.postMessage({ error: e.message })
主线程接收反馈并展示结果
收到Worker消息后，主线程负责解读、聚合、可视化，例如：
- 监听
worker.onmessage，判断event.data.warning或event.data.error - 将多次采样结果存入数组，绘制简易趋势图（用
<canvas>或简单条形<div>） - 触发浏览器通知或在控制台输出带颜色标记的诊断信息（如红色警告、绿色优化建议）
- 分析完成及时终止：
worker.terminate()，避免后台持续占用资源
