web性能优化

// Get Navigation Timing entries 针对html文档
performance.getEntriesByType('navigation')

// Get Resource Timing entries 针对其他依赖资源
performance.getEntriesByType('resource')

// Measuring DNS lookup time
var pageNav = performance.getEntriesByType('navigation')[0]
var dnsTime = pageNav.domainLookupEnd - pageNav.domainLookupStart

// 跨域资源必须开启 Timing-Allow-Origin: https://developer.mozilla.org
// https://www.w3.org/TR/resource-timing-2/#sec-timing-allow-origin

// Quantifying total connection time
var pageNav = performance.getEntriesByType('navigation')[0]
var connectionTime = pageNav.connectEnd - pageNav.connectStart
var tlsTime = 0 // <-- Assume 0 by default

// Did any TLS stuff happen?
if (pageNav.secureConnectionStart > 0) {
  // Awesome! Calculate it!
  tlsTime = pageNav.connectEnd - pageNav.secureConnectionStart
}

// Cache seek plus response time
var pageNav = performance.getEntriesByType('navigation')[0]
var fetchTime = pageNav.responseEnd - pageNav.fetchStart

// Service worker time plus response time
var workerTime = 0

if (pageNav.workerStart > 0) {
  workerTime = pageNav.responseEnd - pageNav.workerStart
}

// Request plus response time (network only)
var totalTime = pageNav.responseEnd - pageNav.requestStart

// Response time only (download)
var downloadTime = pageNav.responseEnd - pageNav.responseStart

// Time to First Byte (TTFB)
var ttfb = pageNav.responseStart - pageNav.requestStart

// HTTP header size
var pageNav = performance.getEntriesByType('navigation')[0]
var headerSize = pageNav.transferSize - pageNav.encodedBodySize

// Compression ratio
var compressionRatio = pageNav.decodedBodySize / pageNav.encodedBodySize

// Get timing data for an important hero image
var heroImageTime = performance.getEntriesByName('https://somesite.com/images/hero-image.jpg')

// Get timing data for an important hero image
var allTheTimings = performance.getEntries({
  // Get entries by name
  name: 'https://somesite.com/images/hero-image.jpg',
  // Get entries by type
  entryType: 'resource',
  // Get entries by their initiatorType value:
  initiatorType: 'img',
})

// Instantiate the performance observer
var perfObserver = new PerformanceObserver(function(list, obj) {
  // Get all the resource entries collected so far
  // (You can also use getEntriesByType/getEntriesByName here)
  var entries = list.getEntries()

  // Iterate over entries
  for (var i = 0; i < entries.length; i++) {
    // Do the work!
  }
})

// Run the observer
perfObserver.observe({
  // Polls for Navigation and Resource Timing entries
  entryTypes: ['navigation', 'resource'],
})

window.addEventListener(
  'unload',
  function() {
    // Caution: If you have a _lot_ of performance entries, don't send _everything_ via getEntries. This is just an example.
    let rumData = new FormData()
    rumData.append('entries', JSON.stringify(performance.getEntries()))

    // Queue beacon request and inspect for failure
    if (!navigator.sendBeacon('/phone-home', rumData)) {
      // Recover here (XHR or fetch maybe)
    }
  },
  false
)

const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    // `entry` is a PerformanceEntry instance.
    console.log(entry.entryType)
    console.log(entry.startTime) // DOMHighResTimeStamp
    console.log(entry.duration) // DOMHighResTimeStamp
  }
})

// Start observing the entry types you care about.
observer.observe({ entryTypes: ['resource', 'paint'] })

const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    ga('send', 'event', {
      eventCategory: 'Performance Metrics',
      eventAction: 'longtask',
      eventValue: Math.round(entry.startTime + entry.duration),
      eventLabel: JSON.stringify(entry.attribution),
    })
  }
})

observer.observe({ entryTypes: ['longtask'] })