// 計(jì)算一些關(guān)鍵的性能指標(biāo)
window.addEventListener('load', (event) => {
    // Time to Interactive
    const timing = performance.getEntriesByType('navigation')[0];
    console.log(timing.domInteractive);
    console.log(timing.fetchStart);
    const diff = timing.domInteractive - timing.fetchStart;
    console.log("TTI: " + diff);
})

// 觀察長任務(wù)
const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        console.log(entry)
    }
})

observer.observe({entryTypes: ['longtask']})

// 界面可見性的狀態(tài)監(jiān)聽
let vEvent = 'visibilitychange';
if (document.webkitHidden != undefined) {
    // webkit prefix detected
    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);

// 網(wǎng)絡(luò)狀態(tài)監(jiān)聽
const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
let type = connection.effectiveType;

function updateConnectionStatus() {
  console.log("Connection type changed from " + type + " to " + connection.effectiveType);
  type = connection.effectiveType;
}

connection.addEventListener('change', updateConnectionStatus);

const {performance, PerformanceObserver} = require('perf_hooks');

const add = (a, b) => a+b;

const num1 = 1;
const num2 = 2;

performance.mark('start');

for(let i = 0; i < 10000000; i++) {
  add(num1, num2);
}

add(num1, 's');

for(let i = 0; i < 10000000; i++) {
  add(num1, num2);
}

performance.mark('end');

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries()[0]);
})
observer.observe({entryTypes: ['measure']});

performance.measure('測量1', 'start', 'end');

其他耗時(shí)計(jì)算公式：

DNS 解析耗時(shí): domainLookupEnd - domainLookupStart
TCP 連接耗時(shí): connectEnd - connectStart
SSL 安全連接耗時(shí): connectEnd - secureConnectionStart
網(wǎng)絡(luò)請求耗時(shí) (TTFB): responseStart - requestStart
數(shù)據(jù)傳輸耗時(shí): responseEnd - responseStart
DOM 解析耗時(shí): domInteractive - responseEnd
資源加載耗時(shí): loadEventStart - domContentLoadedEventEnd
First Byte時(shí)間: responseStart - domainLookupStart
白屏?xí)r間: responseEnd - fetchStart
首次可交互時(shí)間: domInteractive - fetchStart
DOM Ready 時(shí)間: domContentLoadEventEnd - fetchStart
頁面完全加載時(shí)間: loadEventStart - fetchStart
http 頭部大?。?transferSize - encodedBodySize
重定向次數(shù)：performance.navigation.redirectCount
重定向耗時(shí): redirectEnd - redirectStart