根據 Performance API 我們可以做一些簡單的性能檢測 https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceTiming，根據文檔中的大部分內容，整理了以下代碼，僅供參考。
~~~
const timing = window.performance.timing;
const getTimeStr = time => {
if (time < 1) {
return "0";
}
const second = 1000;
const minute = second * 60;
const hour = 60 * minute;
let res = "";
const handleRes = (time, rate, str) => {
if (time > rate) {
const pre = Math.floor(time / rate);
return [pre * rate, pre + str];
}
}
if (time > hour) {
const lsr = handleRes(time, hour, "h");
time -= lsr[0];
res += lsr[1];
}
if (time > minute) {
const lsr = handleRes(time, minute, "m");
time -= lsr[0];
res += lsr[1];
}
if (time > second) {
const lsr = handleRes(time, second, "s");
time -= lsr[0];
res += lsr[1];
}
return res + time + "ms";
}
const showLog = () => {
console.log("立即執行腳本耗時：", getTimeStr(timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart));
console.log("load (en-US)事件耗時：", getTimeStr(timing.loadEventEnd - timing.loadEventStart));
console.log("unload (en-US)事件耗時：", getTimeStr(timing.unloadEventEnd - timing.unloadEventStart));
console.log("tcp連接耗時：", getTimeStr(timing.connectEnd - timing.connectStart));
console.log("DNS查詢耗時：", getTimeStr(timing.domainLookupEnd - timing.domainLookupStart));
console.log("HTTP響應耗時：", getTimeStr(timing.responseEnd - timing.responseStart));
console.log("dom解析耗時：", getTimeStr(timing.domInteractive - timing.domLoading));
console.log("文檔解析耗時（dom解析+內嵌資源解析）：", getTimeStr(timing.domComplete - timing.domLoading));
console.log("HTTP重定向耗時：", getTimeStr(timing.redirectEnd - timing.redirectStart));
console.log("白屏時間", getTimeStr(timing.domComplete - timing.fetchStart));
console.log("domReady", getTimeStr(timing.domContentLoadedEventEnd - timing.fetchStart));
console.log("onLoad", getTimeStr(timing.loadEventEnd - timing.fetchStart));
}
showLog();
~~~
