JavaScript 浏览器 Performance API 分析页面性能怎么做-js教程-PHP中文网

performance api可直接精准分析页面性能，无需额外库：通过navigation获取ttfb、白屏到可交互等关键时间；resource定位慢资源；mark/measure标记业务逻辑；performanceobserver监听paint和longtask；数据用sendbeacon可靠上报。

javascript 浏览器 performance api 分析页面性能怎么做

直接用浏览器原生的 Performance API 就能精准分析页面性能，不需要额外库。核心是分三类打点：看整体加载、盯资源瓶颈、标业务逻辑，再把数据可靠上报。

抓页面加载关键时间点

调用 performance.getEntriesByType('navigation')[0] 获取本次导航的完整生命周期数据。它比已废弃的 performance.timing 更语义清晰、兼容性更好。

TTFB（首字节时间）：用 responseStart - requestStart，反映后端响应快慢
白屏到可交互：用 domContentLoadedEventEnd - fetchStart
完全加载耗时：用 loadEventEnd - fetchStart
注意所有时间都是相对于 performance.timeOrigin 的高精度毫秒数，别用 Date.now() 做差值

查资源加载慢在哪

执行 performance.getEntriesByType('resource') 拿到所有脚本、CSS、图片等资源的加载细节。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

每个 entry 包含 startTime、responseEnd、transferSize 等字段，可算出真实加载耗时
按 initiatorType 过滤类型（如 'img' 或 'script'），重点看首屏资源
跨域资源可能返回 duration 为 0，此时靠 encodedBodySize 和 transferSize 判断是否压缩充分

打业务逻辑自定义标记

用 performance.mark() 和 performance.measure() 锁定关键路径耗时。

比如在 React 组件 useEffect 开始前打 mark('render-start')，渲染完成后打 mark('render-end')
再调 measure('render-time', 'render-start', 'render-end') 得到精确毫秒值
结果通过 performance.getEntriesByType('measure') 取出，支持异步回调内打点

监听渲染与长任务

用 PerformanceObserver 动态捕获 paint 和 longtask 事件，比轮询更及时。

监听 'paint' 类型，拿到 first-paint 和 first-contentful-paint 时间（Chrome 60+ / Firefox 59+）
监听 'longtask'，识别主线程阻塞超 50ms 的任务，定位卡顿根源
observer 必须尽早创建（比如放在内联 script 中），否则会错过初始渲染事件

数据上报推荐用 sendBeacon()，确保页面卸载前也能发出；对重复访问用户可采样（如 10%）或只在指标异常（如 FCP > 3s）时全量上报。初始化代码务必放最顶部，越早执行越不容易漏掉早期时间点。