Brainfuck在线解释器 - 步进调试
编写Brainfuck代码,以可视化的方式步进执行,观察活动纸带和指针。
UD5工具箱
SharedArrayBuffer 是一种特殊的 ArrayBuffer,可以在多个线程(主线程和 Web Worker)之间共享同一块内存。这意味着多个线程可以同时读写同一块内存区域,无需通过 postMessage 复制数据,极大提升了通信效率,尤其适用于高性能计算、游戏引擎、音视频处理等场景。
与普通 ArrayBuffer 不同,SharedArrayBuffer 的内存是共享的,因此需要使用 Atomics API 来保证操作的原子性和线程安全。
当多个线程同时访问共享内存时,可能会出现竞态条件(Race Condition)。例如,两个线程同时读取同一个计数器、各自加1后写回,最终计数可能只增加了1而非2。
Atomics API 提供了原子操作(如 Atomics.add()、Atomics.compareExchange()),保证操作不可分割。此外还提供:
Atomics.store() / Atomics.load() - 原子读写Atomics.wait() - 在 Worker 中等待某个值变化(阻塞)Atomics.notify() - 唤醒等待的线程Atomics.compareExchange() - CAS 操作,实现无锁数据结构出于安全考虑(Spectre 漏洞缓解),浏览器要求使用 SharedArrayBuffer 的页面必须处于跨域隔离环境。需要在服务器响应中设置以下 HTTP 头:
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
或使用更宽松的 credentialless 模式:
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: credentialless
如果未设置这些头,typeof SharedArrayBuffer 将返回 'undefined',本工具会自动降级为模拟模式。
Atomics.wait() 会阻塞当前线程直到被通知或超时。如果在主线程中调用,会导致浏览器 UI 完全冻结,用户体验极差。因此浏览器禁止在主线程中使用 Atomics.wait(),仅允许在 Worker 线程中使用。
如果需要主线程等待共享内存变化,可以使用轮询 + Atomics.load() 配合 requestAnimationFrame 或 setTimeout,或使用 Atomics.waitAsync()(较新的 API,返回 Promise)。
环形缓冲区(Circular Buffer / Ring Buffer)是一种固定大小的 FIFO 队列,使用两个指针管理读写:
写入时,数据放入写指针位置,写指针前进;读取时,从读指针位置取数据,读指针前进。当指针到达数组末尾时,环绕回开头(取模运算)。
判断空/满:如果读写指针相等且计数为0则为空;如果计数等于容量则为满。在多线程环境中,计数器和指针的更新必须使用原子操作。
编写Brainfuck代码,以可视化的方式步进执行,观察活动纸带和指针。
在主线程和Worker中分别计算大斐波那契数,对比界面的响应度。
触发系统原生分享,支持分享文本、链接与文件,检查浏览器兼容性与支持级别。
上传 webpack 的 stats.json,生成交互式树状图、模块大小排名,辅助优化构建体积。
打开多个同源页面,通过Broadcast Channel API实时同步消息或状态变化。
获取和释放命名锁,观察多个标签页如何排队等待资源访问。
设定物理页框数,输入页引用串,动画展示不同页面置换算法的缺页率。
绑定动画进度到滚动位置,交互式调整参数,直观理解scroll-timeline和view-timeline。
可视化Flexbox容器和子项的所有属性及选项,鼠标悬停预览效果。
分别使用主线程Canvas和OffscreenCanvas在Worker中渲染动画,对比FPS和流畅度。
输入 gRPC 服务地址和方法,构造 JSON 请求体,观察转为二进制帧并接收响应解码。
并列播放所有CSS内置缓动函数(ease, linear等)的动画效果,方便对比选择。
拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。
通过Service Worker或本地fetch模拟拦截和转发请求,查看修改后的请求响应。
添加、列出和删除内容索引中的条目,展示离线可用内容。
模拟资源请求,对比ETag值,展示返回304 Not Modified的缓存协商机制,理解HTTP缓存。
向指定 Webhook URL 发送自定义 JSON 负载,查看响应状态码和内容,记录发送历史。
拖放 lcov.info 文件,以颜色标示每行代码的覆盖状态。
在可视化环境中编写JSONPath或JMESPath表达式,实时高亮匹配结果并查看路径提取逻辑。
在页面上叠加可拖拽的半透明网格线,辅助网格布局对齐。
在任意网页上投射可拖拽调整的栅格覆盖线,用来测量和对齐设计稿。
在网格上设置起点/终点和障碍,动态演示广度优先、深度优先、A*等搜索过程。
通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性,实时观察布局变化,理解弹性盒子。
展示几组在各类色盲下仍可区分的定性数据配色方案,含Hex码。
配置滚动容器与目标元素,自定义随滚动触发的关键帧动画,输出纯CSS代码。
在线生成Lorem Ipsum占位文本,可指定段落数、单词数或字节数,用于设计排版和布局填充。
为内容区域生成灰色闪烁的骨架屏占位代码,包含卡片、标题等组件样式。
生成使用Intersection Observer实现图片懒加载的JavaScript代码,含过渡动画。
手动构建HTTP请求,选择方法,填写头和主体,发送并查看完整响应。
选择触发位置、箭头方向与样式,生成轻量悬停提示框代码。