Performance

Performance is a front-end Performance monitoring API used to detect page Performance.

Performance = {// Memory is a nonstandard property, only in Chrome memory: {usedJSHeapSize: TotalJSHeapSize totalJSHeapSize: 35100000, // Available memory jsHeapSizeLimit: 793000000 // Memory size limit}, navigation: {redirectCount: 0, // Page is redirected several times if there is a redirecttype: // 1 indicates that TYPE_RELOAD is refreshed through window.location.reload() // 2 indicates that TYPE_BACK_FORWARD Page entered through the browser's forward and back buttons (historical records) // 255 that is, TYPE_UNDEFINED page entered through other methods}, timing: {// In the same browser context, the previous page (not necessarily the same domain as the current page) unload timestamp, if there is no previous page unload value is the same as fetchStart value: 1441112691935, // Time stamp for previous page (same domain as current page) unload, 0 unloadEventStart if there is no previous page unload or previous page has a different domain from current page: 0, // Corresponding to unloadEventStart, returns the time when the callback function for the previous page's Unload event binding has finished executing unloadEventEnd: 0, // The time when the first HTTP redirection occurred. RedirectStart: 0, // The time when the last HTTP redirect was completed. RedirectEnd: 0, // The time when the browser is ready to fetch the document using HTTP requests, before checking the local cache fetchStart: 1441112692155, // Start time of DNS domain name query. If local cache is used or persistent connection is used, this value is the same as the fetchStart value. DomainLookupStart: 1441112692155, // Time when DNS domain name query is completed, if local cache (i.e. no DNS query) or persistent connection is used, equal to fetchStart value 1441112692155, // The time when HTTP (TCP) starts a connection, equal to the fetchStart value if the connection is persistent // Note that if an error occurs at the transport layer and the connection is re-established, ConnectStart indicates the start time of the new connection. 1441112692155, // The time HTTP (TCP) completes the connection (completes the handshake), equal to the fetchStart value if the connection is persistent // Note that if an error occurs at the transport layer and the connection is re-established, // The security connection has been established and SOCKS authorization has passed connectEnd: SecureConnectionStart: secureConnectionStart: secureConnectionStart: secureConnectionStart: secureConnectionStart: 0, // The time when the HTTP request reads the actual document (the connection is completed), including reading from the local cache // The time when the connection is reconnected is also displayed here: 1441112692158, // The time at which HTTP starts to receive the response (the first byte is retrieved), including the time from the local cache responseStart: 1441112692686, // The time when the HTTP response is fully received (until the last byte is retrieved), including the time when the cache responseEnd is read locally: 1441112692687, // Start parsing the rendering time of the DOM tree, document. readyState becomes loading, and the readyStatechange event domLoading is thrown: 1441112692690, document. readyState will be interactive and readyStatechange events will be thrown // Note that only DOM tree parsing is complete, DomInteractive does not start loading resources within the page: After 1441112693093, / / DOM parsing is complete, the starting time of the resources within the web page loading / / before the DOMContentLoaded event thrown domContentLoadedEventStart: After 1441112693093, / / DOM parsing is complete, within the web resource loaded time (such as) JS script loading has been completed domContentLoadedEventEnd: 1441112693101, // When the DOM tree is parsed and the resource is ready, document. readyState becomes complete and the readyStatechange event domComplete is thrown: 1441112693214, // The load event is sent to the document, i.e. the time when the LOAD callback function starts executing // Note if no load event is bound, the value is 0 loadEventStart: 1441112693214, // Load event callback function execution end time loadEventEnd: 1441112693215}};Copy the code

  • Last document uninstall
  • redirect
  • The browser is ready to grab the document using HTTP
  • Checking the local cache
  • Querying DNS Domain Names
  • TCP Establishing a connection
  • HTTP request and response
  • Render the DOM tree and parse it
  • The page starts loading resources
  • Ready triggers the load event to execute the callback function

Performance indicators

In the front end standard, there are many metrics that define page performance

  • First render time
  • First Contentful Paint – How long it takes to render the First content
  • First Meaningful Paint – First Meaningful render duration
  • Home page loading time
  • Page loading time

The most familiar page load time is when the DOM Load event is triggered to complete.

As a native API, it has the advantages of high acceptance and obvious perception; However, it also does not accurately reflect the performance of page loading and is susceptible to special cases.

Later, the W3C introduced first Render/first content rendering, which is the first non-web background pixel rendering, and first content rendering is the first text, image, background image or non-white Canvas /SVG rendering.

There is no significant difference between these two metrics on most sites today, because current web architecture tends to be single-page applications, with very small HTML structures.