UD5工具箱
使用教程
第一步：了解SharedArrayBuffer的安全要求
SharedArrayBuffer在现代浏览器中需要页面设置特定的安全响应头才能使用：Cross-Origin-Opener-Policy: same-origin和Cross-Origin-Embedder-Policy: require-corp。这是因为Spectre漏洞的影响，浏览器厂商收紧了SharedArrayBuffer的访问权限。如果本工具检测到当前环境不支持SharedArrayBuffer，会自动切换到模拟模式，功能上与真实模式基本一致。
第二步：理解环形缓冲区结构
环形缓冲区是一种固定大小的循环队列数据结构，使用两个指针（写指针和读指针）来管理数据的写入和读取。在SharedArrayBuffer中，缓冲区的大小、写指针位置和读指针位置都存储在共享内存中，可以被所有Worker线程访问。工具界面中的圆形轨道就代表了这个环形缓冲区，每个小方块代表一个数据槽位。
第三步：启动生产者Worker
点击"启动生产者"按钮，主线程会创建一个新的Web Worker并在其中运行生产者逻辑。生产者会持续生成随机数据，通过Atomics.store()写入环形缓冲区的当前写指针位置，然后使用Atomics.add()原子地递增写指针。如果缓冲区已满（写指针即将追上读指针），生产者会调用Atomics.wait()阻塞等待，直到消费者读取数据后调用Atomics.notify()唤醒。
第四步：启动消费者Worker
点击"启动消费者"按钮创建消费者Worker。消费者会通过Atomics.load()读取环形缓冲区中读指针位置的数据，然后原子地递增读指针。如果缓冲区为空（读指针追上写指针），消费者会调用Atomics.wait()阻塞等待，直到生产者写入新数据后调用Atomics.notify()唤醒。观察生产者和消费者同时运行时的协调过程。
第五步：调节操作速度观察不同行为
使用速度调节滑块分别控制生产者和消费者的操作速度。当生产者速度远大于消费者速度时，缓冲区会逐渐填满，最终生产者因缓冲区满而阻塞；当消费者速度远大于生产者速度时，缓冲区会逐渐清空，最终消费者因缓冲区空而阻塞。通过观察这两种极端情况，你可以深入理解生产者-消费者模式中的背压（backpressure）机制。
第六步：查看原子操作日志
在日志面板中查看Atomics操作的详细记录。每条日志记录了操作类型（store/load/add/wait/notify等）、操作的内存偏移量、传入的值、返回的值以及执行该操作的线程标识。通过分析日志的时间序列，你可以验证原子操作的互斥性和可见性，理解Atomics.wait()和Atomics.notify()的配对关系。
第七步：对比模拟模式和真实模式
如果你的环境同时支持真实模式和模拟模式，可以在两种模式间切换对比。真实模式使用WebAssembly或JavaScript的SharedArrayBuffer API，操作是真正的多线程并发；模拟模式使用单线程事件循环模拟并发行为。对比两种模式的日志输出和运行表现，可以更好地理解真实并发与模拟并发的差异。