前端性能监控

window.performance 是W3C性能小组引入的新的API，目前IE9以上的浏览器都支持

Performance.timing 只读属性返回一个 PerformanceTiming 对象，这个对象包括了页面相关的性能信息。

navigationStart                                       前一个网页的卸载时间

unloadEventStart                                    前一个网页关掉的事件

unloadEventEnd                                     前一个网页的unload 事件结束

redirectStart                                            重定向开始时间

redirectEnd                                             重定向结束时间

fetchStart                                                开始请求页面

domainLookupEnd                                  DNS 查询开始

domainLookupStart                                 DNS 查询结束

connectStart                                             向服务器建立握手开始

connectEnd                                              向服务器建立握手结束

secureConnectionStart                            安全握手开始

requestStart                                             向服务器发送请求开始

responseStart                                          服务器返回数据开始

responseEnd                                           服务器返回数据结束  

domLoading                                            解析dom开始

domInteractive                                        解析dom 结束

domContentLoadedEventStart               ContentLoaded开始 

domContentLoadedEventEnd                 ContentLoaded结束

domComplete                                          文档解析完成

loadEventStart                                          load事件发送前

loadEventEnd                                           load事件发送后

 

        let isDOMready = false;
        let util = {
            getperfData:(p)=>{
                let data = {
                    /******** 网络建联时间 ********/

                    //上一个页面的时间
                    prevPage: p.fetchStart - p.navigationStart, 
                    //重定向时间
                    redirect: p.redirectEnd - p.redirectStart, 
                    //dns 查找时间
                    dns: p.domainLookupEnd - p.domainLookupStart,
                    // Tcp 建连时间
                    connect: p.connectEnd - p.connectStart,
                    // 网络总耗时
                    netWork: p.connectEnd - p.navigationStart,



                    /******** 网络接收时间 ********/
                    
                    // 前端从发送到接收的时间 
                    send:p.responseStart - p.requestStart, 
                    // 接收数据用时 
                    receive: p.responseEnd - p.responseStart, 
                    // 请求页面总耗时 
                    request: p.responseEnd - p.requestStart,
                    


                    /******** 前端渲染 ********/

                    //dom 解析时间
                    dom: p.domComplete - p.domLoading,
                    //loadEvent 时间
                    loadEvent: p.loadEventEnd - p.loadEventStart,
                    //前端总时间
                    frontend: p.loadEventEnd - p.domLoading,
                    
                    /******** 关键阶段 ********/
                    
                    //页面完全加载的时间 
                    load:p.loadEventEnd-p.navigationStart ,
                    //dom准备时间
                    domReady:p.domContentLoadedEventStart - p.navigationStart,
                    //可操作时间
                    interactive:p.domInteractive - p.navigationStart,
                    //首字节时间
                    ttfb:p.responseStart - p.navigationStart
                };
                return data;
            },
            //DOM 解析完成
            domready:(callback)=>{
                let timmer = null;
                let runCheck = ()=>{
                    if(isDOMready===true){
                        return void 0;
                    }
                    if(performance.timing.domComplete){
                        //1，停止循环检测  2，运行callback 
                        clearTimeout(timmer);
                        callback();
                        isDOMready = true;
                    }else{
                        //再去循环检测
                        timmer = setTimeout(runCheck,0);
                    }
                }

                //文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载
                if( document.readyState === "interactive" ){
                    callback();
                    return void 0;
                }
                
                document.addEventListener("DOMContentLoaded",()=>{
                    runCheck();
                })
                
            }
        };

        util.domready(()=>{
            let performance = window.performance;
            let perfData = util.getperfData(performance.timing);
            debugger
        })