html5中web worker无法直接读取页面健康度指标，需采用“主线程采集+worker分析”协同模式：主线程用navigation/resource timing、user timing、requestidlecallback和requestanimationframe采集数据；worker负责滑动窗口统计、移动平均比对、复合健康分计算及自动降级；通过结构化消息、transferable objects优化通信，按需启用并轻量反馈结果。
HTML5 中无法让 Web Worker 直接读取页面渲染状态、FPS、内存占用或 DOM 就绪时间等健康度指标，因为 Worker 运行在完全隔离的上下文中，不访问 window、document、performance.navigation 或 performance.memory（后者仅主线程部分支持）。但你可以用“主线程采集 + Worker 分析”的协同模式，实现轻量、可持续、低干扰的页面健康度检测与性能评估。
主线程负责采集原始性能信号
健康度检测必须由主线程发起和采集，Worker 只承担计算与聚合任务。关键信号包括：
-
Navigation Timing 数据：使用
performance.getEntriesByType("navigation")[0]获取白屏时间、FCP、LCP、TTFB 等； -
Resource Timing 数据：通过
performance.getEntriesByType("resource")统计关键资源加载耗时与失败率； -
User Timing 标记：在业务关键节点调用
performance.mark("login_start")，供后续分析； -
主线程空闲率：用
requestIdleCallback每秒采样一次空闲时间占比，反映 UI 响应压力； -
帧率粗略估算：在
requestAnimationFrame回调中记录时间戳差值，计算滚动/动画期间的平均帧间隔。
Worker 负责长期聚合与趋势建模
将采集到的原始数据批量发给 Worker，由它完成高开销分析，避免阻塞主线程：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 维护滑动窗口（如最近 60 秒）的耗时分布直方图，识别长尾延迟突增；
- 对多个 FCP/LCP 样本做移动平均，并与历史基线比对，标记“性能退化”（如 LCP 升高 >200ms 且持续 3 次）；
- 结合资源加载失败数、空闲率下降、帧间隔 >16ms 出现频次，计算复合健康分（0–100）；
- 使用
performance.now()精确测量自身分析耗时，若单次聚合超 10ms，自动降级为抽样处理（如每 5 条只处理 1 条）。
通信与资源控制要克制
频繁传大量 performance 数据会引发序列化开销与 GC 压力。建议：
- 主线程按需打包：每次只发送结构化对象（如
{ type: "nav", fcp: 842, lcp: 1290 }），不传原始PerformanceEntry[]数组； - 使用 Transferable Objects：对大数组（如 1000+ 条 resource 记录）用
postMessage(data, [data.buffer])实现零拷贝； - Worker 不主动轮询，只响应主线程触发的
analyze消息； - 默认关闭所有健康检测逻辑，仅当 URL 含
?health=on或 DevTools 打开时启用。
结果反馈与轻量可视化
Worker 分析完成后，将摘要结果返回主线程，用于 UI 提示或上报：
- 返回格式示例：
{ healthScore: 87, degradedMetrics: ["LCP"], warning: "LCP increased by 240ms vs baseline" }； - 主线程可将结果写入
console.info，或在右下角浮动小面板中显示健康分（带颜色标识）； - 如需图表，用
<canvas></canvas>绘制滚动趋势线——绘图逻辑仍在主线程，Worker 只提供每秒一个{ timestamp, score }数据点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
