最新

Web Vitals 本地模拟器 - LCP/FID/CLS面板

加载测试页面，实时显示Largest Contentful Paint等核心指标，了解加载体验。

开发工具 LCP Web Vitals 性能 模拟

最新

Resource Timing 缓冲区管理 - 处理大量资源计时

设置资源计时缓冲区大小，监听 resourcetimingbufferfull 事件并处理。

开发工具 Resource Timing 性能 管理 缓冲区

最新

第三方脚本影响评估器 - 分析页面中的外部脚本

输入 URL，列出所有第三方域名的脚本，估算其对加载时间的影响。

开发工具 分析 性能 第三方脚本 评估

最新

网页资源瀑布图展示 - 请求时间线和大小

利用Performance API绘制当前页面所有资源的加载时间线和文件大小瀑布图。

开发工具 性能 瀑布图 资源加载

预加载/预获取指南 - 资源提示选择

根据资源类型和加载场景，推荐使用preload、prefetch还是preconnect标签。

优化工具 preload 性能 指南

资源加载时间查看 - Performance API瀑布

显示当前页面所有资源的详细加载时序（DNS、连接、等待、接收），帮助优化。

开发工具 分析 性能 资源

最新

DOM 变更性能分析器 - 记录并统计重排重绘

开启监听后操作页面，统计 DOM 变化次数和频率，帮助定位布局抖动。

开发工具 DOM 分析 性能

最新

OffscreenCanvas性能演示 - Worker中绘图对比

分别使用主线程Canvas和OffscreenCanvas在Worker中渲染动画，对比FPS和流畅度。

开发工具 Canvas Worker 性能

最新

requestIdleCallback 任务调度演示 - 空闲时间利用

模拟在主线程繁忙时插入低优先级任务，观察 requestIdleCallback 如何将任务推迟到空闲周期执行。

开发工具 requestIdleCallback 性能 空闲 调度

最新

WebGPU 渐变渲染性能对比 - GPU vs CPU 绘制

分别使用 WebGPU 和 Canvas 2D 绘制复杂渐变，实时对比帧率与 CPU/GPU 占用，展示硬件加速优势。

图形 WebGPU 性能 渐变 渲染

最新

长任务检测器 - 使用 PerformanceObserver 监控

开启检测后持续记录超过 50ms 的长任务，列出其持续时间和来源，帮助优化 INP。

开发工具 性能 监控 长任务

最新

Lighthouse JSON 报告查看器 - 本地审计结果可视化

拖入Lighthouse导出的JSON报告，使用交互界面展示分数、建议和指标详情，无需Chrome DevTools。

开发工具 Lighthouse 可视化 性能 报告

最新

JavaScript循环性能测试 - 比较多种写法

在浏览器中即时测试for、forEach、map、for-of等循环的执行速度，帮助选择最优写法。

开发工具 JavaScript 循环 性能

最新

简易 JS 内存性能分析器 - 对象分配追踪

手动触发创建大量对象，监控 performance.memory 的变化，初步判断内存增长趋势。

性能 内存 分析 对象 性能

最新

JavaScript 代码执行计时器 - 测量函数运行耗时

输入函数调用，使用 console.time 或 performance.now 精确测量代码块执行时间。

开发工具 JavaScript 性能 测量 计时

最新

正则表达式性能基准测试 - 引擎回溯时间比较

输入目标文本与多个正则方案，测量执行耗时与步数，识别低效模式并优化。

开发工具 回溯 性能 正则 测试

最新

isInputPending演示 - 检测用户输入中断长任务

在执行长计算任务时，通过navigator.scheduling.isInputPending()及时中断以响应用户输入。

开发工具 中断 性能 输入

最新

Content-Visibility性能测试 - 长列表渲染对比

加载大量DOM元素，对比启用和不启用content-visibility: auto时的渲染时间和滚动体验。

开发工具 优化 性能 渲染

内容可见性优化提示 - content-visibility

分析页面结构，提示哪些长列表区域适合添加content-visibility: auto优化。

优化工具 CSS 优化 性能

LQIP占位图生成 - 缩略图转Base64

将图片缩小并压缩为极小的Base64字符串，作为低质量占位图代码。

优化工具 LQIP 占位图 性能

懒加载代码生成 - IntersectionObserver

生成使用Intersection Observer实现图片懒加载的JavaScript代码，含过渡动画。

优化工具 性能 懒加载 生成

最新

Performance API 数据仪表盘 - 导航时序与资源统计

提取当前页面Performance API的navigation、resource与paint数据，可视化展示加载各阶段时长。

开发工具 Performance API 分析 导航 性能

首屏关键CSS提取工具 - 可视化选取折叠之上样式

粘贴HTML和CSS，工具将尝试分析并为你抽取首屏内联样式，辅助性能优化。

优化工具 CSS 性能 提取

最新

Web Vitals模拟仪表盘 - LCP/FID/CLS演示

通过滑块调节LCP、FID、CLS等指标值，实时显示对应的谷歌核心网页指标评分与颜色。

开发工具 Web Vitals 性能 模拟

绘制时机检测 - FP/FCP性能指标展示

通过PerformanceObserver获取首次绘制(FP)和首次内容绘制(FCP)时间。

开发工具 API Paint Timing 性能

被动事件监听检测 - 滚动性能检查

检测页面touchstart和wheel事件是否使用passive:true，避免移动端滚动延迟。

开发工具 passive 性能 滚动

JS堆内存使用监控 - performance.memory

显示当前页面的JavaScript堆内存快照和使用限制，辅助内存泄漏调试。

开发工具 内存 性能 监控

模拟性能评分计算 - 根据网络/资源条件

设定FCP、LCP、CLS等指标值，模拟计算PageSpeed Insights得分估算。

开发工具 性能 模拟 评分

最新

前端性能最佳实践自查表 - 交互式检查清单

覆盖加载、渲染、安全、可访问性等领域的自查清单，勾选后生成得分与建议。

开发工具 Web 性能 最佳实践 检查清单