1.监控资源加载错误
https://blog.fundebug.com/2019/08/17/how-to-monitor-resource-error/
最好的方法是使用事件监听error
2.
script请求顺序图
3.Navigation Timing API
4.阶段耗时
| 上报字段 | 描述 | 计算方式 | 备注 |
|---|---|---|---|
| dns | dns连接耗时 | domainLookupEnd - domainLookupStart | |
| tcp | tcp连接耗时 | connectEnd - connectStart | |
| ssl | ssl安全连接耗时 | connectEnd - secureConnectionStart | 只在 https 下有效 |
| trans | 数据传输耗时 | responseEnd - responseStart | |
| ttfb | time to first byte, 网络请求耗时 | responseStart - requestStart | ttfb 有多种计算方式 |
| dom | DOM解析耗时 | domInteractive - domLoading | |
| res | 资源加载耗时 | loadEventStart - domContentLoadedEventEnd | 表示页面中的同步加载资源 |
5.关键性能指标
| 上报字段 | 描述 | 计算方式 | 备注 |
|---|---|---|---|
| firstbyte | 首包时间 | responseStart - domainLookupStart | |
| fpt | first paint time, 首次渲染时间 / 白屏时间 | domLoading - navigationStart | 如果浏览器支持，则会取 chrome.loadTimes().firstPaintTime 计算 |
| tti | time to interact, 首次可操作时间 | domInteractive - navigationStart | 浏览器完成所有 HTML 解析并且完成 DOM 构建，此时浏览器开始加载资源 |
| ready | html 加载完成时间， 即 dom ready 时间 | domContentLoadEventEnd - navigationStart | 如果页面有同步执行的 js，则同步 js 执行时间 = ready - tti |
| load | 页面完全加载时间 | loadEventStart - navigationStart | load = 首次渲染时间 + DOM解析耗时 + 同步js执行 + 资源加载耗时 |
网友评论