Web 推送通知调试器 - 检查订阅与推送参数

计算任务库与对比演示

工具内置了多种计算密集型任务的演示案例，每个案例都实现了主线程执行版本和 Worker 执行版本。用户可以选择不同的任务类型来体验 Web Worker 的性能优势。任务类型包括：质数查找（寻找指定范围内的所有质数）、数组排序（对大规模随机数组进行排序）、斐波那契数列计算（递归计算大数值的斐波那契数）、字符串处理（对大量字符串进行正则匹配和替换）、矩阵运算（执行大规模矩阵乘法运算）等。

每种任务都提供了可调节的参数（如数据规模、计算复杂度），用户可以通过滑块调整参数来观察不同负载下的性能表现差异。对比演示采用并排布局，左侧为主线程直接执行，右侧为 Worker 执行，两个面板同时启动并实时展示执行进度和结果。

实时性能监控面板

工具提供了全面的性能监控面板，实时展示主线程和 Worker 的各项性能指标。关键指标包括：任务执行时间、主线程阻塞时间、帧率变化、内存使用情况等。通过对比两个面板的性能数据，用户可以清晰地看到 Worker 执行方案在各项指标上的优势。

性能面板还包含帧率时间线图表，以折线图形式展示两种方案在任务执行过程中的帧率变化。主线程直接执行方案在计算期间帧率会明显下降（因为计算阻塞了渲染），而 Worker 方案的帧率在整个过程中保持稳定。这种可视化的帧率对比非常直观地展示了多线程对用户体验的改善效果。

主线程阻塞可视化

工具的核心可视化功能是主线程阻塞状态展示。在演示过程中，界面中央的动画区域会持续播放一个流畅的动画（如旋转的元素或移动的粒子）。当使用主线程执行计算时，动画会出现明显的卡顿甚至完全冻结；当使用 Worker 执行计算时，动画保持流畅运行。这种实时的视觉对比让用户直观感受到计算任务对主线程的影响。

工具还会在动画区域显示实时的帧率计数器和任务执行状态指示器，帮助用户精确判断主线程的阻塞程度和 Worker 的执行进度。

通信开销分析

Worker 方案需要在主线程和 Worker 之间传递数据，这会产生额外的序列化和反序列化开销。工具在性能面板中专门展示了通信开销的统计信息，包括数据传输量、序列化耗时、反序列化耗时等。通过分析这些数据，用户可以了解在什么数据规模下 Worker 方案的计算节省时间能覆盖通信开销，为实际项目中的技术选型提供参考。

代码生成与模板

每种计算任务的演示都附带了完整的源代码，包括 Worker 脚本文件和主线程调用代码。代码经过精心组织，带有详细的注释说明。用户可以查看代码了解 Worker 的创建、消息传递、错误处理等标准使用模式，也可以将代码模板复制到自己的项目中作为起点。