UD5工具箱
第一步：了解演示界面
打开工具页面后，您会看到分为多个区域的界面。顶部是任务选择和参数配置区域。中央区域分为左右两个面板：左侧标记为主线程执行，右侧标记为 Worker 执行。两个面板下方各有一个动画区域，用于展示主线程的响应性状态。底部是性能对比面板，包含实时数据和图表。在开始演示之前，花一点时间了解各区域的位置和功能。
第二步：选择计算任务
在任务选择区域中，点击质数查找任务开始第一个演示。使用数据规模滑块将计算量设置为中等（如查找 100 万以内的质数）。这个计算量足以产生明显的执行时间差异，但不会让演示等待太久。确认两个面板的参数设置相同，确保对比的公平性。
第三步：执行对比演示
点击开始按钮同时启动两个面板的计算。观察以下几个关键现象：左侧面板（主线程）的动画在计算开始后出现明显卡顿，帧率计数器数字急剧下降；右侧面板（Worker）的动画在整个计算过程中保持流畅，帧率计数器保持稳定。底部性能面板中，主线程方案的帧率折线出现明显的低谷，Worker 方案的帧率折线保持平稳。
当两个面板都完成计算后，查看性能对比数据。主线程方案的帧率在计算期间可能降至个位数甚至为零，而 Worker 方案的帧率始终维持在 60 FPS 左右。这个对比清楚地展示了多线程计算对用户体验的改善。
第四步：调整计算复杂度
将数据规模调整为最大，再次运行对比演示。观察随着计算量的增加，主线程方案的卡顿程度如何加剧，而 Worker 方案依然保持流畅。同时关注性能面板中的通信开销数据，分析在大数据量下消息传递的耗时占比。尝试不同的任务类型（如矩阵运算、字符串处理），比较不同计算类型下两种方案的性能差异。
第五步：学习代码实现
点击代码查看按钮，阅读 Worker 脚本和主线程代码的实现。重点理解以下关键模式：Worker 的创建方式（new Worker()）、消息传递机制（postMessage 和 onmessage）、数据的序列化传递、Worker 完成后的结果处理、以及 Worker 的错误处理。将学到的模式应用到自己的项目中，解决实际的计算性能问题。