UD5工具箱
第三方请求拦截演示 - 分析页面外部资源调用
列出当前页面加载的所有第三方域名请求，并演示如何通过 CSP 或浏览器扩展拦截。
性能优化与监测
共 26+ 款工具Web Performance API 浏览器 - 查看所有时间指标
展示 navigation timing、resource timing 等所有性能条目，并解释各指标含义。
CSS Contain 属性演示 - 观察布局/样式/尺寸限制效果
应用 contain 的各种值（layout, paint, size），直观对比开启前后渲染和布局的变化。
网络传输大小计算器 - 含压缩与头部开销
输入文件原始大小，选择压缩算法和网络协议，估算实际网络传输大小和耗时。
DOM 重排/重绘触发器测试 - 性能影响可视化
执行各种属性修改，可视化显示哪些操作触发回流或重绘，帮助编写高性能代码。
CLS 手动计算器 - 模拟布局偏移分数
输入移动距离和视口尺寸，手动模拟单个布局偏移的分数计算方式，加深对 CLS 的理解。
资源提示标签生成器 - dns-prefetch/preconnect/preload
根据输入的外部域名，生成 dns-prefetch、preconnect 和 preload 标签。
Web Vitals 本地模拟器 - LCP/FID/CLS面板
加载测试页面，实时显示Largest Contentful Paint等核心指标，了解加载体验。
Resource Timing 缓冲区管理 - 处理大量资源计时
设置资源计时缓冲区大小，监听 resourcetimingbufferfull 事件并处理。
页面生命周期事件演示 - freeze/resume等
展示页面从active到frozen等状态切换事件，记录日志，帮助理解浏览器优化机制。
Performance API 数据仪表盘 - 导航时序与资源统计
提取当前页面Performance API的navigation、resource与paint数据，可视化展示加载各阶段时长。
content-visibility: auto 性能演示 - 跳过渲染优化
对比启用和不启用 content-visibility: auto 时页面大量列表的渲染性能差异。
第三方脚本影响评估器 - 分析页面中的外部脚本
输入 URL，列出所有第三方域名的脚本，估算其对加载时间的影响。
JavaScript 代码执行计时器 - 测量函数运行耗时
输入函数调用，使用 console.time 或 performance.now 精确测量代码块执行时间。
HTTP请求时序图生成器 - 瀑布图分析
手动输入多个请求的起止时间，绘制并发请求时序瀑布图，模拟Web性能优化。
Lighthouse JSON 报告查看器 - 本地审计结果可视化
拖入Lighthouse导出的JSON报告，使用交互界面展示分数、建议和指标详情，无需Chrome DevTools。
简易 JS 内存性能分析器 - 对象分配追踪
手动触发创建大量对象，监控 performance.memory 的变化，初步判断内存增长趋势。
长任务检测器 - 使用 PerformanceObserver 监控
开启检测后持续记录超过 50ms 的长任务，列出其持续时间和来源，帮助优化 INP。
DOM 变更性能分析器 - 记录并统计重排重绘
开启监听后操作页面，统计 DOM 变化次数和频率，帮助定位布局抖动。
设备内存 (deviceMemory) 检测器 - 前端按需降级
显示navigator.deviceMemory数值，并给出基于内存的代码分割与功能降级建议。
requestIdleCallback 任务调度演示 - 空闲时间利用
模拟在主线程繁忙时插入低优先级任务，观察 requestIdleCallback 如何将任务推迟到空闲周期执行。
前端性能最佳实践自查表 - 交互式检查清单
覆盖加载、渲染、安全、可访问性等领域的自查清单，勾选后生成得分与建议。
图片格式质量对比器 - PNG/JPEG/WebP/AVIF 主观评测
上传一张图片，同时压缩为多种格式并调整质量，并排比较细节与文件大小，选择最佳格式。
动画帧率分析器 - requestAnimationFrame 监控
显示当前页面动画的实时 FPS 图表，检测掉帧和卡顿，辅助性能优化。
HAR 文件分析器 - 网络请求日志可视化
上传HTTP Archive格式文件，生成请求瀑布图与状态统计，深入了解网页加载细节。
JSON 体积估算器 - 计算KB与压缩后尺寸
粘贴JSON，显示原始大小与模拟Gzip压缩后的大小。