首屏加载计算

考虑的层面有： 1、网络层面：减少 HTTP 请求、启用缓存、优化图片、CDN 加速 2、代码层面：压缩代码、优化代码结构、优化 JavaScript 执行、减少重排和重绘、使用事件委托、使用懒加载等 3、页面结构层面：优化 HTML 结构、首屏优化、异步加载资源等 4、其他方面：优化字体加载、监测和分析等

计算加载时间

var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
var type = connection.effectiveType;

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

connection.addEventListener('change', updateConnectionStatus);

window.addEventListener('DOMContentLoaded', (event) => {
 let timing = performance.getEntriesByType('navigation')[0];
 console.log(timing.domInteractive);
 console.log(timing.fetchStart);
 let diff = timing.domInteractive - timing.fetchStart;
 console.log("TTI: " + diff);
})

window.addEventListener('load', () => {
  setTimeout(() => {
   const timing = window.performance.timing;
   console.log('DNS查询耗时：', timing.domainLookupEnd - timing.domainLookupStart)
   console.log('TCP链接耗时：', timing.connectEnd - timing.connectStart)
   console.log('request耗时：', timing.responseEnd - timing.responseStart)
   console.log('解析DOM树耗时：', timing.domComplete - timing.domInteractive)
   console.log('白屏时间：', timing.domLoading - timing.fetchStart)
   console.log('domready时间：', timing.domContentLoadedEventEnd - timing.fetchStart)
   console.log('onload时间：', timing.loadEventEnd - timing.fetchStart)
  }, 0);
})

DNS 解析耗时: domainLookupEnd - domainLookupStart
TCP 链接耗时: connectEnd - connectStart
SSL 安全连接耗时: connectEnd - secureConnectionStart
网络请求耗时 (TTFB): responseStart - requestStart
数据传输耗时: responseEnd - responseStart
DOM 解析耗时: domInteractive - responseEnd
资源加载耗时: loadEventStart - domContentLoadedEventEnd
First Byte时间: responseStart - domainLookupStart
白屏时间: responseEnd - fetchStart
首次可交互时间: domInteractive - fetchStart
DOM Ready 时间: domContentLoadEventEnd - fetchStart
页面完全加载时间: loadEventStart - fetchStart
http 头部大小： transferSize - encodedBodySize
重定向次数：performance.navigation.redirectCount
重定向耗时: redirectEnd - redirectStart

//拿到Performance并且初始化一些参数
let timing = performance.timing,
    start = timing.navigationStart,
    dnsTime = 0,
    tcpTime = 0,
    firstPaintTime = 0,
    domRenderTime = 0,
    loadTime = 0;
//根据提供的api和属性，拿到对应的时间
dnsTime = timing.domainLookupEnd - timing.domainLookupStart;
tcpTime = timing.connectEnd - timing.connectStart;
firstPaintTime = timing.responseStart - start;
domRenderTime = timing.domContentLoadedEventEnd - start;
loadTime = timing.loadEventEnd - start;

console.log('DNS解析时间:', dnsTime,'\nTCP建立时间:', tcpTime, 
'\n首屏时间:', firstPaintTime,'\ndom渲染完成时间:', domRenderTime, 
   '\n页面onload时间:', loadTime);