前端监控器Performance

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/JudyC/article/details/84938406

performance的timing对象里，存储了各种与浏览器性能有关的时间数据。

const { timing } = performance;
const t = {};

//DNS查询时间
t.dns = timing.domainLookupEnd - timing.domainLookupStart;
//解析DOM树时间
t.dom = timing.domComplete - timing.domInteractive;
//重定向时间
t.redirect = timing.redirectEnd - timing.redirectStart;
//请求耗时
t.request = timing.responseEnd - timing.requestStart;
//白屏时间
t.wait = timing.responseStart - timing.navigationStart;

DNS查询时间长--检查是不是域名使用太多，或者没有做DNS预解析，DNS预解析在HTTP协议下a标签是默认开启的，HTTPS是默认关闭的

开启：

<!-- off为关闭,ON为开启 -->
<meta http-equiv="X-dns-prefetch-control" content="on" />


<link rel="dns-prefetch" href="https://baidu.com" />
<!--如果不确定是http还是https连接的话建议如下写法 -->
<link rel="dns-prefetch" href="//baidu.com" />

DOM解析过长--考虑HTML结构是否合理。

重定向时间戳--将域名写正确