监控性能
1:加载级别的优化：https://blog.csdn.net/weixin_39725756/article/details/112232273
const {
domainLookupEnd,
domainLookupStart,
connectEnd,
connectStart,
domComplete,
domLoading,
domInteractive,
responseStart,
responseEnd,
navigationStart,
loadEventEnd,
fetchStart,
requestStart,
redirectEnd,
domContentLoadedEventStart,
} = performance.timing;
console.log('DNS解析时间：', domainLookupEnd - domainLookupStart);
/**
* {
* DNS层面，ds预解析：
* 1、dns-prefetch（done）<meta http-equiv="x-dns-prefetch-control" content="on" />
* }
* */
const redirectEndFix = redirectEnd || fetchStart;
console.log('开始时间点：', fetchStart - redirectEndFix);
console.log('开始发起请求的时间点：', requestStart - redirectEndFix);
console.log('响应结束的时间点：', responseEnd - redirectEndFix);
console.log('开始解析dom树的时间点：', domLoading - redirectEndFix);
console.log('完成dom解析的时间点：', domInteractive - redirectEndFix);
console.log('完成dom渲染时间点：', domComplete - redirectEndFix);
console.log('========');
console.log(
'DOM 解析完成后，网页内资源加载开始的时间,文档发生 DOMContentLoaded事件的时间～完成解析 DOM 树的时间：',
domContentLoadedEventStart - domInteractive,
);
/**
* 加载node_modules的资源：
* 1，是否可以并行
* 2，是否可以只加载首屏的资源（访问其他路由就会造成耗时长一些）
* 3，是否可以延后加载一些资源
* 4，那些资源可以第一次请求之后就存到本地
*/
console.log('HTTP 响应全部接收完成的时间～完成解析 DOM 树的时间：', domInteractive - responseEnd);
console.log('TCP建立连接的时间：', connectEnd - connectStart);
console.log('request请求耗时：', responseEnd - responseStart);
console.log('解析dom树耗时：', domInteractive - domLoading);
console.log('dom渲染时间：', domComplete - domContentLoadedEventStart);
console.log('白屏时间：', responseEnd - navigationStart);
console.log('页面onload时间（总下载时间）', loadEventEnd - navigationStart);
标签：console,log,redirectEndFix,时间,performance,解析,domInteractive From： https://www.cnblogs.com/wyliunan/p/16715625.html