进程调度可视化 - FCFS/SJF/轮转对比
输入进程列表,同时对比先来先服务、短作业优先和轮转调度算法的甘特图和平均等待时间。
绘制时机检测 - FP/FCP性能指标展示
通过PerformanceObserver获取首次绘制(FP)和首次内容绘制(FCP)时间。
Web Vitals模拟仪表盘 - LCP/FID/CLS演示
通过滑块调节LCP、FID、CLS等指标值,实时显示对应的谷歌核心网页指标评分与颜色。
电梯调度算法模拟 - 先来先服务/扫描/LOOK
添加楼层请求,观察电梯在不同调度算法下的移动轨迹和等待时间。
CSS 容器查询实验室 - 基于卡片宽度的响应式布局
拖拽改变容器宽度,观察使用container-type和@container规则的元素如何自适应样式。
Web Vitals 本地模拟器 - LCP/FID/CLS面板
加载测试页面,实时显示Largest Contentful Paint等核心指标,了解加载体验。
FP-Growth 频繁模式挖掘演示 - 关联规则学习
输入交易清单,逐步可视化FP树的构建与频繁项集挖掘过程,理解购物篮分析算法。
周期任务模拟器 - setInterval可视化运行
添加多个周期任务和一次性延迟任务,在时间轴上观察其调用过程,学习JS定时器。
存储读写速度测试 - localStorage vs IndexedDB
对localStorage和IndexedDB的读写操作进行计时,比较两者性能差异。
LocalStorage查看器 - 浏览器存储键值探查
实时查看当前域名下所有localStorage键值对,支持编辑、删除和导出,前端调试利器。
Storage Buckets API 演示 - 分离存储空间与策略
创建多个存储桶并设置不同的持久化策略,管理数据生命周期。
多样式骨架屏生成器 - 卡片/列表/表格
选择卡片、列表或表格布局,生成对应的灰色闪烁骨架屏HTML/CSS代码。
加载动画合集 - 纯 CSS 旋转器/骨架屏
展示数十种纯 CSS 的加载动画和骨架屏效果,点击复制代码直接使用。
滚动捕捉沙盒 - CSS Scroll Snap实验
调整滚动容器和子项的对齐方式、停止点,观察CSS Scroll Snap平滑滑动效果。
CI/CD流水线可视化编辑器 - 阶段与任务设计
拖拽构建阶段与任务,配置触发条件,生成对应的GitLab CI或GitHub Actions YAML代码。
栈式虚拟机演示 - 后置运算执行
输入后缀表达式或简单指令,逐步演示栈的压入弹出计算过程。
Sass Mixin生成器 - 常用代码块模板
选择常用模式(如响应式断点、flex居中、省略号),生成对应Sass Mixin代码。
Protobuf 在线解码器 - 原始字节转可读结构
输入Proto定义和Base64编码的protobuf数据,在线解码为JSON,辅助分析二进制通信内容。
Resource Timing 缓冲区管理 - 处理大量资源计时
设置资源计时缓冲区大小,监听 resourcetimingbufferfull 事件并处理。
记忆化(Memoization)函数演示 - 缓存结果对比
对一个耗时函数应用记忆化,展示相同输入下第二次调用速度的提升和缓存命中。
资源提示标签生成器 - preconnect/prefetch
输入第三方域名,生成<link rel='preconnect'>或dns-prefetch等资源提示标签。
API速率限制模拟器 - 滑动窗口与令牌桶
可视化演示固定窗口、滑动窗口、令牌桶等常见限流算法,实时请求计数与拒绝逻辑。
NFC读写演示 - Web NFC写入文本/URL
使用Web NFC API向兼容标签写入文本或URL,并验证读取结果。
请求节流演示器 - 滑块/桶算法可视化
动画展示滑动窗口和令牌桶算法如何限制API请求速率,对比两者差异。
CSS accent-color 预览器 - 统一表单控件强调色
调整 accent-color 值,实时查看单选框、复选框、进度条等原生控件的主题变化。
Prometheus 指标解析器 - 文本格式转表格
粘贴 Prometheus 指标文本,解析为结构化表格,并支持基本过滤和排序。
Data URI 生成器 - 文件转内联base64
拖放小图片或文本文件,转换为可嵌入HTML/CSS的Data URI,设置MIME类型。
CSV按列排序处理 - 多字段升降序
上传CSV文件,指定优先排序列和升降序,干净地整理杂乱数据。
SEO标题/描述预览工具 - 模拟搜索结果卡片
输入标题与描述,模拟Google搜索结果片段,检查截断与关键词效果。
精灵图分割器 - 将合图拆成单帧小图
上传合并的精灵图,设定行数和列数,自动裁切为单独的小图并打包下载。
UD5工具箱