性能优化（二）：常见的性能优化API

performance
connection
requestIdleCallback  （增加浏览器的空闲时间，一帧16ms之后，还有剩余时间。。react时间调度原理，用requestAnimationFrame代替requestIdleCallback实现）
...

一，关键时间节点

window.addEventListener('load',() => {
  const timing = performance.getEntriesByType('navigation')[0]
  console.log('timing',timing)
  // 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
})

// 通过PerformanceObserve得到所有的long tasks对象

      let observer =  new PerformanceObserver((list) => {
        for (const entry of list.getEntries()) {
          console.log('long task:', entry)
        }
      })
      //  监听long tasks
      observer.observe({entryTypes: ['longtask']})

 

二，网络状态

// 获取网络状态: 切换网络资源。eg：视频播放
      // 获取网络连接对象
      let connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection
      let type = connection.effectiveType
      function updateConnectStatus() {
        console.log('connection type change from' + type + ' to ' + connection.effectiveType)
      }
      connection.addEventListener('changed',updateConnectStatus)