【监控】如何监控白屏、首屏渲染时长

如何监控白屏、首屏渲染时长

相关文章

• 基于注释的日志上报方案
• 错误监控的手段
• 性能监控有哪些指标
• 日志上报的方法
• 应用无感录屏
• 如何监控资源加载时长
• 如何监听白屏、首屏渲染时长

如何监控白屏、首屏渲染时长

---

一、使用PerformanceTiming

PerformanceTiming 接口是 Web Performance API 的一部分，它提供了有关页面加载和导航事件的详细时间信息。

PerformanceTiming接口

• navigationStart

  • 表示浏览器准备好使用导航页面的时间戳。

• fetchStart

  • 表示浏览器准备好使用 HTTP 请求获取导航资源的时间戳。

• domainLookupStart

  • 表示开始进行 DNS 查询的时间戳。

• connectStart

  • 表示浏览器准备好创建一个连接去获取导航资源的时间戳。

• requestStart

  • 表示浏览器向服务器发出请求的时间戳。

• responseStart

  • 表示浏览器从服务器接收到第一个字节的时间戳。

• responseEnd

  • 表示浏览器接收到最后一个字节的时间戳。

• domLoading

  • 表示浏览器开始解析文档的时间戳。

• domInteractive

  • 表示浏览器已经完成解析 DOM 树，但文档元素还在加载的时间戳。

• domContentLoadedEventStart

  • 表示文档的 DOMContentLoaded 事件被触发的时间戳。

• domContentLoadedEventEnd

  • 表示文档的 DOMContentLoaded 事件处理完成的时间戳。

• domComplete

  • 表示文档的 load 事件被触发的时间戳。

• loadEventStart

  • 表示文档的 load 事件被触发的时间戳。

• loadEventEnd

  • 表示文档的 load 事件处理完成的时间戳。

二、监控白屏时长

白屏时间可以通过计算 domInteractive 减去 fetchStart 的差值来获得。下面是使用 JavaScript 获取白屏时间的示例代码：

// 获取 PerformanceTiming 对象
var timing = window.performance.timing;

// 计算白屏时间
var whiteScreenTime = timing.domInteractive - timing.fetchStart;

console.log('白屏时间：', whiteScreenTime, '毫秒');

三、监控首屏渲染时长

要获取首屏渲染时长，可以使用 PerformanceTiming 接口中的 domContentLoadedEventStart 和 fetchStart 属性。这两个时间戳的差值代表了从开始加载页面资源到首个 DOMContentLoaded 事件触发的时长。

// 获取 PerformanceTiming 对象
var timing = window.performance.timing;

// 计算首屏渲染时长
var firstPaintTime = timing.domContentLoadedEventStart - timing.fetchStart;

console.log('首屏渲染时长：', firstPaintTime, '毫秒');