CityRay/Blog

[JS] Javascript 加載監控數據 - PerformanceTiming

CityRay opened this issue · 0 comments

獲取頁面加載監控數據 PerformanceTiming

DNS解析時間: domainLookupEnd - domainLookupStart
TCP建立連接時間: connectEnd - connectStart
白屏時間: responseStart - navigationStart
dom渲染完成時間: domContentLoadedEventEnd - navigationStart
頁面onload時間: loadEventEnd - navigationStart

Sample Code

# sample 1
let startTag = 'start-func';
let endTag = 'end-func';
window.performance.mark(startTag);
# your code
window.performance.mark(endTag);
window.performance.measure(`test func mark init`, startTag, endTag);

# sample 2
window.performance.mark('RemoveMessage');
let start = performance.now();
# your code
let end = performance.now();
console.log('Spend:' + (end - start) + 'ms');

Reference