根据 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();
~~~
