1 Performance indicators and optimization objectives

RAIL evaluation criteria
  • Respond: The event should be handled within 50ms
  • Animation: Generates a frame every 10ms
  • Idle: Increases the Idle time as much as possible
  • Load: Load content within 5s

Performance testing tool

  • Chrome DevTools development and debugging, performance evaluation
  • The overall quality assessment of Lighthouse website
  • WebPageTest multi-test site, comprehensive performance reporting

Use Chrome DevTools for performance optimization testing

  • Audit (lighthouse)
  • Throttling adjusts network throughput
  • Performance Analysis
  • Network Analysis of Network loading

Commonly used performance measurement APIs

  1. performance.getEntriseByType(“navigation”)[0]
  • DNS resolution time: domainLookupEnd – domainLookupStart
  • TCP connection time: connectEnd – connectStart
  • SSL connection duration: connectEnd – secureConnectionStart
  • TTFB: responseStart – requestStart
  • Data transfer time: responseEnd – responseStart
  • DOM parsing time: domInteractive – responseEnd
  • Resource loading time: loadEventStart – domContentLoadedEventEnd
  • First Byte Time: responseStart – domainLookupStart
  • ResponseEnd – fetchStart
  • First interactive time: domInteractive – fetchStart
  • DOM Ready time: domContentLoadEventEnd – fetchStart
  • Page full load time: loadEventStart – fetchStart
  • HTTP header size: transferSize -encodedBodySize
  • Redirection number: performance. Navigation. RedirectCount
  • Redirection time: redirectEnd – redirectStart
  1. PerformanceObserver
// Get all the long Tasks objects in PerformanceObserver
let observer = new PerformanceObserver((list) = >{
    for(const entry of list.getEntries()){
        console.log(entry)
    }
})
// Listen for long tasks
observer.observe({entryTypes: ['longtask']})
Copy the code
  1. Visibilitychange/webkitvisibilitychang judgment to browse the API of the page
let vEvent = 'visibilitychange'
if(document.webkitHidden ! =undefined) {// WebKit event name
    vEvent = 'webkitvisibilitychang'
}
function visibilityChange(){
	// Page is not visible
    if(document.hidden || document.webkitHidden){
        console.log('web page is hidden')}else {
        // The page is visible
        conlose.log('web page is visibile')}}document.addEventListener(vEvent, visibilityChange,false)
Copy the code
  1. Navigator.connection Check network information
let connection = naviagtor.connection || navigator.mozConnection || navgator.webkitConnection

let type = connection.effectiveType
function updataConnectionStatus() {
    console.log(connection.effectiveType)
}
connection.addEventListener("change",updataConnectionStatus,false)
Copy the code