Chrome Dev Tools 之 Performance

var performance = {
    // memory 内存 ( only Chrome )
    memory: {
        usedJSHeapSize:  17045133, // JS对象占用的内存
        totalJSHeapSize: 18463485, // 可使用的总内存
        jsHeapSizeLimit: 2197815296 // 内存大小限制
    },
    // navigation 导航
    navigation: {
        redirectCount: 0, // 重定向次数
        type: 0           // 0 TYPE_NAVIGATENEXT 正常进入的页面(非刷新、非重定向等)
                          // 1 TYPE_RELOAD 通过 window.location.reload() 刷新的页面
                          // 2 TYPE_BACK_FORWARD 通过浏览器的前进后退按钮进入的页面
                          // 255 TYPE_UNDEFINED 非以上方式进入的页面
    },
 	// timing 时间
    timing: {
        // 前一个网页 unload 的时间戳
        navigationStart: 1573989694438,
        // 前一个网页(与当前页面同域) unload 开始的时间戳
        unloadEventStart: 0,
        // 前一个网页(与当前页面同域) unload 结束的时间戳
        unloadEventEnd: 0,
        // 第一个 HTTP 重定向发生时的时间。有跳转且是同域名内的重定向才算，否则值为 0
        redirectStart: 0,
        // 最后一个 HTTP 重定向完成时的时间。有跳转且是同域名内部的重定向才算，否则值为 0
        redirectEnd: 0,
        // 浏览器准备好使用 HTTP 请求抓取文档的时间
        fetchStart: 1573989694445,
        // DNS 域名查询开始的时间
        domainLookupStart: 1573989694445,
        // DNS 域名查询完成的时间
        domainLookupEnd: 1573989694445,
        // HTTP 开始建立连接的时间
        connectStart: 1573989694445,
        // HTTP 完成建立连接的时间
        connectEnd: 1573989694445,
        // HTTPS 连接开始的时间
        secureConnectionStart: 0,
        // HTTP 请求完成建立连接
        requestStart: 1573989694564,
        // HTTP 开始接收响应的时间
        responseStart: 1573989694605,
        // HTTP 响应全部接收完成的时间
        responseEnd: 1573989694618,
        // DOM 树开始解析渲染
        domLoading: 1573989694688,
        // DOM 解析完成，资源未加载的时间
        domInteractive: 1573989696189,
        // DOM 解析完成，资源加载开始的时间
        domContentLoadedEventStart: 1573989696189,
        // DOM 解析完成，网页内资源加载完成的时间
        domContentLoadedEventEnd: 1573989696330,
        // DOM 解析完成，且资源准备就绪的时间
        domComplete: 1573989697523,
        // load 事件回调函数开始执行的时间 (若未绑定 load 事件，值为 0)
        loadEventStart: 1573989697531,
        // load 事件回调函数执行完毕的时间
        loadEventEnd: 1573989697553
    }
};

// 计算加载时间
function getPerformanceTiming () {  
    var performance = window.performance;
    if (!performance) {
        console.log('你的浏览器不支持 performance 接口');
        return;
    }
    var t = performance.timing;
    var times = {};
    
    // * 用户等待整个页面加载完成的时间
    times.loadPage = t.loadEventEnd - t.navigationStart;
    // * DOM 树解析时间
    times.domReady = t.domComplete - t.responseEnd;
    // * 重定向的时间
    times.redirect = t.redirectEnd - t.redirectStart;
    // * DNS 解析时间
    times.lookupDomain = t.domainLookupEnd - t.domainLookupStart;
    // * 白屏时间 TTFB (Time To First Byte)  ? cdn
    times.ttfb = t.responseStart - t.navigationStart;
    // * 内容加载完成的时间  ? gzip 文件压缩
    times.request = t.responseEnd - t.requestStart;
    // 执行 onload 回调函数的时间  ? onload回调函数执行过多，延迟加载、懒加载
    times.loadEvent = t.loadEventEnd - t.loadEventStart;
    // DNS 缓存时间 (App Cache)
    times.appcache = t.domainLookupStart - t.fetchStart;
    // 卸载页面的时间
    times.unloadEvent = t.unloadEventEnd - t.unloadEventStart;
    // TCP 连接时间
    times.connect = t.connectEnd - t.connectStart;
 
    return times;
}

name: "http://cdn.xxx/xxx.css",  // 资源名称(绝对路径)
entryType: "resource",           // 资源类型
initiatorType: "link",           // link => <link>标签
                                 // script => <script>标签
                                 // redirect => 重定向
duration: 18.00099999999999      // 加载时间

function getEntryTiming (entry) {
    var t = entry;
    var times = {};
    // 重定向时间
    times.redirect = t.redirectEnd - t.redirectStart;
    // DNS查询时间
    times.lookupDomain = t.domainLookupEnd - t.domainLookupStart;
    // 内容加载完成的时间
    times.request = t.responseEnd - t.requestStart;
    // TCP 建立连接完成握手的时间
    times.connect = t.connectEnd - t.connectStart;
	// 新增属性
    times.name = entry.name;
    times.entryType = entry.entryType;
    times.initiatorType = entry.initiatorType;
    times.duration = entry.duration;
    return times;
}

function getFunctionTimeWithPerformance (func) {  
    var timeStart = window.performance.now();
    func();
    var timeEnd = window.performance.now();
    return (timeEnd - timeStart);
}

function randomFunc (n) {
    if (!n) {
        n = ~~(Math.random() * 10000); // 生成一个随机数
    }
    var nameStart = 'markStart' + n;
    var nameEnd   = 'markEnd' + n;
    var name = 'measureRandomFunc' + n;
    // 函数执行前做标记
    window.performance.mark(nameStart);
    for (var i = 0; i < n; i++) {
        // do nothing
    }
    // 函数执行后再做标记
    window.performance.mark(nameEnd);
    // 测量这个两个标记的时间距离，并保存
    window.performance.measure(name, nameStart, nameEnd);
}
randomFunc();  
randomFunc(888);
// 查看保存的标记
var marks = window.performance.getEntriesByType('mark');
var measure = window.performance.getEntriesByType('measure');
var entries = window.performance.getEntriesByName('measureRandomFunc888'); // 查看自定义测量
console.log(marks,measure,entries);
// 清除标记
window.performance.clearMarks('markStart888'); // 清除指定标记
window.performance.clearMarks(); // 清除所有标记
window.performance.clearMeasures('measureRandomFunc');
window.performance.clearMeasures();

// 旧方案
var t = performance.timing  
var domReadyTime = t.domComplete - t.responseEnd;
console.log(domReadyTime)
// 新方案
window.performance.measure('domReady','responseEnd','domComplete');
var domReadyMeasure = window.performance.getEntriesByName('domReady');
console.log(domReadyMeasure);