performance 分析
performance.getEntriesByType("navigation");

不同阶段之间是连续的吗? —— 不连续
每个阶段都一定会发生吗?—— 不一定
测量资源加载时间
const resourceListEntries = performance.getEntries('resource')
// 某类资源的加载时间,可测量图片、js、css、XHR
resourceListEntries.forEach(resource => {
if (resource.initiatorType == 'img') {
console.info(`Time taken to load ${resource.name}: `, resource.responseEnd - resource.startTime);
}
});
JS总加载时间
const p = window.performance.getEntries();
let cssR = p.filter(ele => ele.initiatorType === "script");
Math.max(...cssR.map((ele) => ele.responseEnd)) - Math.min(...cssR.map((ele) => ele.startTime));
CSS 加载耗时
const p = window.performance.getEntries();
let cssR = p.filter(ele => ele.initiatorType === "css");
Math.max(...cssR.map((ele) => ele.responseEnd)) - Math.min(...cssR.map((ele) => ele.startTime));
总结
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
最后更新于
这有帮助吗?