3.Web标准APIS

Web标准APIS

可以利用Web标准APIS，来得出一些数据上报网站性能，从而分析网站的性能。

关键时间节点（Navigation Timing，Resource Timing）

window.addEventListener('load', (event) => {
    let timing = performance.getEntriesByType('navigation')[0];
    console.log(timing);

    let domInteractive = timing.domInteractive;
    let fetchStart = timing.fetchStart;
    console.log("TTI 首次可交互时间: " + (domInteractive - fetchStart));

    let domainLookupEnd = timing.domainLookupEnd;
    let domainLookupStart = timing.domainLookupStart;
    console.log("DNS 解析耗时: " + (domainLookupEnd - domainLookupStart));

    let connectEnd = timing.connectEnd;
    let connectStart = timing.connectStart;
    console.log("TCP 连接耗时: " + (connectEnd - connectStart));

    let secureConnectionStart = timing.secureConnectionStart;
    console.log("SSL 安全连接耗时: " + (connectEnd - secureConnectionStart));

    let responseStart = timing.responseStart;
    let requestStart = timing.requestStart;
    console.log("TTFB 网络请求耗时: " + (responseStart - requestStart));

    let responseEnd = timing.responseEnd;
    console.log("数据传输耗时: " + (responseEnd - responseStart));
    console.log("DOM 解析耗时: " + (domInteractive - responseEnd));

    let loadEventStart = timing.loadEventStart;
    let domContentLoadedEventEnd = timing.domContentLoadedEventEnd;
    console.log("资源加载耗时: " + (loadEventStart - domContentLoadedEventEnd));
    console.log("First Byte时间: " + (responseStart - domainLookupStart));
    console.log("白屏时间: " + (responseEnd - fetchStart));
    console.log("DOMReady 时间: " + (domContentLoadedEventEnd - fetchStart));
    console.log("页面完全加载时间: " + (loadEventStart - fetchStart));

    let transferSize = timing.transferSize;
    let encodedBodySize = timing.encodedBodySize;
    console.log("http 头部大小: " + (transferSize - encodedBodySize));
    console.log("重定向次数:", performance.navigation.redirectCount);

    let redirectEnd = timing.redirectEnd;
    let redirectStart = timing.redirectStart;
    console.log("重定向耗时: " + (redirectEnd - redirectStart));
})

通过以上的数据，可以完成用户浏览网站的时，网站的相关性能数据的上报。

网络状态（Network APIS）

通过以下代码可以查看程序中的长任务：

// 观察长任务
const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        console.log(entry)
    }
})
observer.observe({ entryTypes: ['longtask'] });

通过以下代码可以监听用户的网络状态，从而实现在不同网络状态下，请求不同的资源，实现网站的快速访问：

var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
var type = connection.effectiveType;
function updateConnectionStatus() {
    console.log("Connection type changed from " + type + " to " + connection.effectiveType);
    type = connection.effectiveType;
}
connection.addEventListener('change', updateConnectionStatus);

网页显示状态（UI APIS）

通过以下代码监听用户离开页面（切换窗口时）的操作，从而相应的逻辑操作：

// 见面可见性的状态监听
let vEvent = 'visibilitychange';
if (document.webkitHidden != undefined) {
    vEvent = 'webkitvisibilitychange';
}
function visibilityChanged() {
    if (document.hidden || document.webkitHidden) {
        console.log("Web page is hidden.")
    } else {
        console.log("Web page is visible.")
    }
}
document.addEventListener(vEvent, visibilityChanged, false);

标签：Web,console,log,APIS,标准,connection,let,耗时,timing
来源： https://blog.csdn.net/sinat_41212418/article/details/120661627