1. JavaScript Performance API是什么？
概念与作用
Performance API 是浏览器提供的一组接口，用于在网页层面对加载和执行过程中的时间进行精确的观测与记录。它的核心作用是帮助开发者量化页面响应时间、渲染阶段的耗时，以及哪些阶段成为性能瓶颈，从而指导优化工作。
JavaScript Performance API是什么？如何使用它测量网页性能与优化
通过这些接口，开发者 可以获得关于导航、资源加载、脚本执行等阶段的时间信息，从而实现对网页性能的可观测性和可追踪性。
核心对象与方法
该 API 主要围绕 Performance、PerformanceEntry、PerformanceObserver 等对象展开，提供对时间点和时间段的标记与测量能力。
常用的方法包括 performance.mark、performance.measure、performance.getEntriesByType，以及使用 PerformanceObserver 进行事件驱动的观测。
在实际场景中，理解这些对象与方法有助于把握网页加载的关键阶段，并把数据转化为可执行的优化点。
2. 如何使用它测量网页性能？
性能入口点：performance.mark 与 performance.measure
使用 performance.mark 可以在任意时间点打上自定义标记；随后使用 performance.measure 将两个标记之间的耗时计算成一个测量项，从而得到具体的持续时间。
这组组合为你提供了对初始化、渲染、脚本执行等阶段的精确分段能力，是日常性能分析的基础。
// 设置起点
performance.mark('start-setup');
// 进行初始化任务
// ...
// 结束点
performance.mark('end-setup');
// 计算耗时
performance.measure('setupTime', 'start-setup', 'end-setup');
聚合与查询
通过 performance.getEntriesByType 可以获取不同类型的性能条目，例如 measure、mark、navigation 等，便于后续分析。
另外，PerformanceObserver 允许你实时监听新的条目，建立对页面执行的事件驱动观测。
const measures = performance.getEntriesByType('measure');
console.log(measures);
示例：监听导航与资源加载
导航条目通常包含页面加载所需的总体耗时，而 PerformanceResourceTiming 提供每个资源的加载时长信息，能够帮助你定位资源瓶颈。
const [nav] = performance.getEntriesByType('navigation');
console.log('页面加载耗时:', nav.duration);performance.getEntriesByType('resource').forEach(r => {console.log(r.name, r.duration);
});
3. 实战：基于 Performance API 的网页优化流程
构建一组关键指标
在实际优化中，建议围绕 首屏渲染时间、最大内容渲染时间（LCP）、总阻塞时间、以及 交互延迟等指标进行监控与改进。
通过把导航条目、资源条目与自定义测量组合起来，可以得到一个覆盖加载路径的全景图，而越早发现瓶颈，优化成本越低。
将这些指标持续纳入监控，将帮助团队以数据驱动的方式优化网页性能。
减少长任务与分解加载
对长时间执行的任务进行拆分，使用 requestIdleCallback、setTimeout、以及 Web Workers 将工作切分，从而降低单次主线程阻塞时间，提升页面的响应性。
通过将关键渲染任务分解成更小的单元，并结合 PerformanceObserver 实时观测，可以验证分解策略的效果。
// 使用 requestIdleCallback 将大任务切片执行
function runChunkedTask(chunks, task) {let i = 0;function next() {if (i < chunks) {task(i++);requestAnimationFrame(next);}}requestIdleCallback(next);
}4. 实战：在页面加载过程中的应用
实时监控与调试
通过 PerformanceObserver，你可以在页面加载阶段动态捕捉标记和测量项，实时了解系统行为。
这使得调试过程更高效，因为你不用等待整份日志就能看到关键指标的变化。
const obs = new PerformanceObserver((list) => {for (const entry of list.getEntries()) {console.log(entry.name, entry.startTime, entry.duration);}
});
obs.observe({ entryTypes: ['mark', 'measure', 'navigation'] });// 标记示例
performance.mark('start');
setTimeout(() => performance.mark('end'), 100);
performance.measure('demo', 'start', 'end');
将指标导出到分析工具
为了在后续阶段对比不同版本或环境的性能，可以将 measure 与 navigation、resource 相关数据导出到分析工具或后端系统，形成数据驱动的优化闭环。
在客户端聚合完毕后，你可以通过 fetch 将数据发送到分析平台，从而支持长期的趋势分析与容量规划。
const payload = {timestamp: Date.now(),measures: performance.getEntriesByType('measure').map(m => ({name: m.name,duration: m.duration,startTime: m.startTime,})),resources: performance.getEntriesByType('resource').map(r => ({name: r.name,duration: r.duration,})),
};
fetch('/api/perf', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify(payload)
});
