performance

监控性能

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);