performance api 是用于精准定位性能瓶颈的工具，而非一键提速方案；它通过 performance.now()、mark()/measure()、navigation 时序、资源加载分析及长任务监听，帮助开发者识别慢点并针对性优化。

Performance API 不是用来“一键提速”的工具，而是帮你看清代码哪里慢、为什么慢、慢多少的显微镜。用对了，才能精准下刀——不是盲目删代码，而是砍掉真正拖后腿的部分。

用 performance.now() 精确测量关键函数

它比 Date.now() 更可靠：不受系统时间跳变影响，精度达微秒级，且时间起点统一（从页面导航开始）。适合测单次执行耗时，比如复杂计算、数据处理或渲染逻辑。

• 在函数调用前记录起点：const start = performance.now();
• 函数执行完立即记终点：const end = performance.now();
• 差值即真实耗时：console.log(`处理耗时: ${end - start} ms`);
• 注意避开首次运行的 JIT 编译干扰，可循环多次取中位数或平均值再分析

用 mark() 和 measure() 切分流程、定位瓶颈

当一段逻辑包含多个子步骤（如“获取数据 → 解析 → 渲染 → 绑定事件”），单纯测总耗时无法判断问题出在哪。这时用标记法把流程结构化：

• 在每个阶段起始处打标记：performance.mark('fetch-start');、performance.mark('render-start');
• 阶段结束后打结束标记：performance.mark('fetch-end');、performance.mark('render-end');
• 用 performance.measure() 自动计算区间：performance.measure('fetch-duration', 'fetch-start', 'fetch-end');
• 所有标记和测量结果可在浏览器 DevTools 的 Performance 面板 → Timings 轨道中直观查看，支持导出、对比

结合 getEntriesByType('navigation') 分析加载链路

performance.timing 已被废弃，应改用 performance.getEntriesByType('navigation')[0] 获取标准导航时序。它提供更稳定、语义清晰的字段，例如：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• domainLookupStart / domainLookupEnd → 查 DNS 是否成瓶颈
• connectStart / connectEnd → 判断 TCP 连接是否慢或不稳定
• responseStart / domContentLoadedEventEnd → 看 HTML 解析与 DOM 构建是否过长
• loadEventEnd - navigationStart → 得到完整页面加载耗时，用于基线监控

这些数值不是孤立的，要横向对比（不同网络环境、不同设备）和纵向追踪（上线前后变化），才能识别真实退化点。

监听资源加载与长任务，发现隐性卡顿

用户感知的“卡”，未必来自 JS 执行，也可能源于大图加载阻塞渲染，或一次 100ms 的同步脚本让主线程窒息。可用：

• performance.getEntriesByType('resource') 扫描所有图片/CSS/JS 加载耗时，筛选 duration > 1000 的慢资源，针对性启用 CDN、压缩、懒加载
• PerformanceObserver 监听 'longtask' 类型事件，捕获持续 ≥50ms 的主线程占用，快速定位未拆分的巨型函数或第三方 SDK 的同步初始化
• 搭配 initiatorType 字段（如 'img', 'script'）可直接关联到具体资源或代码位置

不复杂但容易忽略

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！