美文网首页
性能分析

性能分析

作者: ITtian | 来源:发表于2019-01-10 17:13 被阅读8次
    function getTiming() {
            try {
                var time = performance.timing;
                var timingObj = {};
    
                var loadTime = (time.loadEventEnd - time.loadEventStart) / 1000;
    
                if(loadTime < 0) {
                    setTimeout(function() {
                        getTiming();
                    }, 200);
                    return;
                }
    
                timingObj['重定向耗时'] = (time.redirectEnd - time.redirectStart);
                timingObj['DNS解析耗时'] = (time.domainLookupEnd - time.domainLookupStart);
                timingObj['TCP链接耗时'] = (time.connectEnd - time.connectStart);
                timingObj['HTTP请求响应完成耗时'] = (time.responseEnd - time.requestStart);
                timingObj['白屏时间'] = (time.domLoading - time.fetchStart);
                timingObj['DOM结构解析完成耗时'] = (time.domInteractive - time.domLoading);            
                timingObj['DOM开始加载前耗时'] = (time.responseEnd - time.navigationStart);
                timingObj['DOM加载完成耗时'] = (time.domComplete - time.domLoading);
                timingObj['脚本加载耗时'] = (time.domContentLoadedEventEnd - time.domContentLoadedEventStart);
                timingObj['onload事件耗时'] = (time.loadEventEnd - time.loadEventStart);
    
                timingObj['domready时间'] = (time. domContentLoadedEventEnd - time. fetchStart);
                timingObj['onload时间'] = (time. loadEventEnd - time. fetchStart);
                timingObj['页面完全加载耗时'] = (timingObj['重定向耗时'] + timingObj['DNS解析耗时'] + timingObj['TCP链接耗时'] + timingObj['HTTP请求响应完成耗时'] + timingObj['DOM结构解析完成耗时'] + timingObj['DOM加载完成耗时']);
    
                for(item in timingObj) {
                    console.log(item + ":" + timingObj[item] + '毫秒(ms)');
                }
            } catch(e) {
                console.log(timingObj)
                console.log(performance.timing);
            }
        }
    

    附上一张经典图


    image.png

    各字段的含义如下:

    • startTime:有些浏览器实现为navigationStart,代表浏览器开始unload前一个页面文档的开始时间节点。比如我们当前正在浏览baidu.com,在地址栏输入google.com并回车,浏览器的执行动作依次为:unload当前文档(即baidu.com)->请求下一文档(即google.com)。navigationStart的值便是触发unload当前文档的时间节点。

      如果当前文档为空,则navigationStart的值等于fetchStart。

    • redirectStartredirectEnd:如果页面是由redirect而来,则redirectStart和redirectEnd分别代表redirect开始和结束的时间节点;

    • unloadEventStartunloadEventEnd:如果前一个文档和请求的文档是同一个域的,则unloadEventStartunloadEventEnd分别代表浏览器unload前一个文档的开始和结束时间节点。否则两者都等于0;

    • fetchStart是指在浏览器发起任何请求之前的时间值。在fetchStart和domainLookupStart之间,浏览器会检查当前文档的缓存;

    • domainLookupStartdomainLookupEnd分别代表DNS查询的开始和结束时间节点。如果浏览器没有进行DNS查询(比如使用了cache),则两者的值都等于fetchStart

    • connectStartconnectEnd分别代表TCP建立连接和连接成功的时间节点。如果浏览器没有进行TCP连接(比如使用持久化连接webscoket),则两者都等于domainLookupEnd

    • secureConnectionStart:可选。如果页面使用HTTPS,它的值是安全连接握手之前的时刻。如果该属性不可用,则返回undefined。如果该属性可用,但没有使用HTTPS,则返回0;

    • requestStart代表浏览器发起请求的时间节点,请求的方式可以是请求服务器、缓存、本地资源等;

    • responseStartresponseEnd分别代表浏览器收到从服务器端(或缓存、本地资源)响应回的第一个字节和最后一个字节数据的时刻;

    • domLoading代表浏览器开始解析html文档的时间节点。我们知道IE浏览器下的document有readyState属性,domLoading的值就等于readyState改变为loading的时间节点;

    • domInteractive代表浏览器解析html文档的状态为interactive时的时间节点。domInteractive并非DOMReady,它早于DOMReady触发,代表html文档解析完毕(即dom tree创建完成)但是内嵌资源(比如外链css、js等)还未加载的时间点;

    • domContentLoadedEventStart:代表DOMContentLoaded事件触发的时间节点:

      页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件,HTML文档不会等待样式文件,图片文件,子框架页面的加载(load事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。

    • domContentLoadedEventEnd:代表DOMContentLoaded事件完成的时间节点,此刻用户可以对页面进行操作,也就是jQuery中的domready时间;

    • domComplete:html文档完全解析完毕的时间节点;

    • loadEventStartloadEventEnd分别代表onload事件触发和结束的时间节点

    相关文章

      网友评论

          本文标题:性能分析

          本文链接:https://www.haomeiwen.com/subject/cliehqtx.html