UD5工具箱
图片懒加载测试器 - loading=lazy 效果对比
放置大量图片并开启懒加载，通过滚动观察网络请求的发起，验证原生延迟加载。
标签： 性能监测工具
共 45+ 款工具DOM 插入性能基准测试 - innerHTML vs createElement vs DocumentFragment
比较不同 DOM 插入方法的执行速度，可视化渲染耗时，帮助选择最优动态内容更新策略。
HTTP/2 Server Push 分析器 - 检查推送资源与缓存
模拟服务器推送资源，展示推送的资源和缓存行为，帮助优化 HTTP/2 策略。
requestAnimationFrame 监控器 - 实时 FPS 与帧时间
显示当前页面动画的帧率、单帧耗时和丢帧比例，辅助流畅度调试。
事件循环延迟监测 - 检测主线程阻塞程度
持续测量 setTimeout 实际回调时间与期望时间的差值，可视化展示主线程繁忙程度。
CSS Contain 属性演示 - 观察布局/样式/尺寸限制效果
应用 contain 的各种值（layout, paint, size），直观对比开启前后渲染和布局的变化。
OffscreenCanvas 性能测试 - 主线程 vs Worker 渲染速度
分别在主线程和 Worker 中使用 Canvas 执行密集绘制，对比 FPS 和主线程阻塞程度。
content-visibility 性能演示 - 跳过渲染不可见区域
对长列表应用 content-visibility:auto，对比启用前后渲染时间和内存占用。
Web 字体优化建议器 - 分析字体加载对性能的影响
输入网页 URL，检测所用 Web 字体，评估加载策略并给出优化建议。
WebPageTest 瀑布图在线分析 - 解读性能详情
粘贴或上传 WebPageTest 结果 JSON，可视化瀑布图并高亮性能瓶颈。
数组操作方法性能对比 - map/filter/reduce/for 循环
在同一数据上运行多种数组遍历方式，测量并比较它们的执行时间，辅助性能优化决策。
DOM 重排/重绘触发器测试 - 性能影响可视化
执行各种属性修改，可视化显示哪些操作触发回流或重绘，帮助编写高性能代码。
懒加载代码生成 - IntersectionObserver
生成使用Intersection Observer实现图片懒加载的JavaScript代码，含过渡动画。
资源加载时间查看 - Performance API瀑布
显示当前页面所有资源的详细加载时序（DNS、连接、等待、接收），帮助优化。
Web Vitals 本地模拟器 - LCP/FID/CLS面板
加载测试页面，实时显示Largest Contentful Paint等核心指标，了解加载体验。
JavaScript循环性能测试 - 比较多种写法
在浏览器中即时测试for、forEach、map、for-of等循环的执行速度，帮助选择最优写法。
Web Worker 质数搜索器 - 不阻塞界面计算
在后台 Worker 中计算大范围内的质数，主线程实时绘制进度条，展示多线程优势。
OffscreenCanvas性能演示 - Worker中绘图对比
分别使用主线程Canvas和OffscreenCanvas在Worker中渲染动画，对比FPS和流畅度。
Performance API 数据仪表盘 - 导航时序与资源统计
提取当前页面Performance API的navigation、resource与paint数据，可视化展示加载各阶段时长。
Resource Timing 缓冲区管理 - 处理大量资源计时
设置资源计时缓冲区大小，监听 resourcetimingbufferfull 事件并处理。
预加载/预获取指南 - 资源提示选择
根据资源类型和加载场景，推荐使用preload、prefetch还是preconnect标签。
Web Vitals模拟仪表盘 - LCP/FID/CLS演示
通过滑块调节LCP、FID、CLS等指标值，实时显示对应的谷歌核心网页指标评分与颜色。
资源提示标签生成器 - dns-prefetch/preconnect/preload
根据输入的外部域名，生成 dns-prefetch、preconnect 和 preload 标签。
被动事件监听检测 - 滚动性能检查
检测页面touchstart和wheel事件是否使用passive:true，避免移动端滚动延迟。
绘制时机检测 - FP/FCP性能指标展示
通过PerformanceObserver获取首次绘制(FP)和首次内容绘制(FCP)时间。
requestIdleCallback 任务调度演示 - 空闲时间利用
模拟在主线程繁忙时插入低优先级任务，观察 requestIdleCallback 如何将任务推迟到空闲周期执行。
长任务检测器 - 使用 PerformanceObserver 监控
开启检测后持续记录超过 50ms 的长任务，列出其持续时间和来源，帮助优化 INP。
LQIP占位图生成 - 缩略图转Base64
将图片缩小并压缩为极小的Base64字符串，作为低质量占位图代码。
JavaScript 代码执行计时器 - 测量函数运行耗时
输入函数调用，使用 console.time 或 performance.now 精确测量代码块执行时间。
Lighthouse JSON 报告查看器 - 本地审计结果可视化
拖入Lighthouse导出的JSON报告，使用交互界面展示分数、建议和指标详情，无需Chrome DevTools。
网页资源瀑布图展示 - 请求时间线和大小
利用Performance API绘制当前页面所有资源的加载时间线和文件大小瀑布图。
WebGPU 渐变渲染性能对比 - GPU vs CPU 绘制
分别使用 WebGPU 和 Canvas 2D 绘制复杂渐变，实时对比帧率与 CPU/GPU 占用，展示硬件加速优势。
Content-Visibility性能测试 - 长列表渲染对比
加载大量DOM元素，对比启用和不启用content-visibility: auto时的渲染时间和滚动体验。
模拟性能评分计算 - 根据网络/资源条件
设定FCP、LCP、CLS等指标值，模拟计算PageSpeed Insights得分估算。
DOM 变更性能分析器 - 记录并统计重排重绘
开启监听后操作页面，统计 DOM 变化次数和频率，帮助定位布局抖动。
正则表达式性能基准测试 - 引擎回溯时间比较
输入目标文本与多个正则方案，测量执行耗时与步数，识别低效模式并优化。
内容可见性优化提示 - content-visibility
分析页面结构，提示哪些长列表区域适合添加content-visibility: auto优化。
isInputPending演示 - 检测用户输入中断长任务
在执行长计算任务时，通过navigator.scheduling.isInputPending()及时中断以响应用户输入。
前端性能最佳实践自查表 - 交互式检查清单
覆盖加载、渲染、安全、可访问性等领域的自查清单，勾选后生成得分与建议。
第三方脚本影响评估器 - 分析页面中的外部脚本
输入 URL，列出所有第三方域名的脚本，估算其对加载时间的影响。
首屏关键CSS提取工具 - 可视化选取折叠之上样式
粘贴HTML和CSS，工具将尝试分析并为你抽取首屏内联样式，辅助性能优化。
content-visibility: auto 性能演示 - 跳过渲染优化
对比启用和不启用 content-visibility: auto 时页面大量列表的渲染性能差异。
简易 JS 内存性能分析器 - 对象分配追踪
手动触发创建大量对象，监控 performance.memory 的变化，初步判断内存增长趋势。
动画帧率分析器 - requestAnimationFrame 监控
显示当前页面动画的实时 FPS 图表，检测掉帧和卡顿，辅助性能优化。
JS堆内存使用监控 - performance.memory
显示当前页面的JavaScript堆内存快照和使用限制，辅助内存泄漏调试。