performance 分析
performance.getEntriesByType("navigation");
不同阶段之间是连续的吗? —— 不连续
每个阶段都一定会发生吗?—— 不一定
测量资源加载时间
JS总加载时间
CSS 加载耗时
总结
let p = window.performance.getEntries(); 重定向次数:performance.navigation.redirectCount JS 资源数量:p.filter(ele => ele.initiatorType === "script").length CSS 资源数量:p.filter(ele => ele.initiatorType === "css").length AJAX 请求数量:p.filter(ele => ele.initiatorType === "xmlhttprequest").length IMG 资源数量:p.filter(ele => ele.initiatorType === "img").length 总资源数量: window.performance.getEntriesByType("resource").length
不重复的耗时时段区分: 重定向耗时: redirectEnd - redirectStart DNS 解析耗时: domainLookupEnd - domainLookupStart TCP 连接耗时: connectEnd - connectStart SSL 安全连接耗时: connectEnd - secureConnectionStart 网络请求耗时 (TTFB): responseStart - requestStart HTML 下载耗时:responseEnd - responseStart DOM 解析耗时: domInteractive - responseEnd 资源加载耗时: loadEventStart - domContentLoadedEventEnd
其他组合分析: 白屏时间: domLoading - fetchStart 粗略首屏时间: loadEventEnd - fetchStart 或者 domInteractive - fetchStart DOM Ready 时间: domContentLoadEventEnd - fetchStart 页面完全加载时间: loadEventStart - fetchStart
最后更新于