The W3C’s implementation standards for browsers, shown in the figure below, answer this question

  1. redirect
  2. The cache
  3. The DNS
  4. A TCP connection
  5. The HTTP request
  6. The HTTP response
  7. Processing documents
  8. loading
  9. To render the page

Performance. Timing Properties

Attribute Description:

Is an unsigned long. The number of milliseconds of long represents a Unix timestamp at a certain time

  • PerformanceTiming. NavigationStart: browser context on a page unload time stamp, if there is no one document, this value will and PerformanceTiming fetchStart are the same
  • PerformanceTiming. UnloadEventStart: throw out the timestamp when unload events, if not on a document or a document with a different sources in the redirection This value back to return zero
  • PerformanceTiming. UnloadEventEnd: the end of the unload event time stamp, if not on a document or a document with redirect a document under different source This value back to return zero
  • PerformanceTiming. RedirectStart: at the beginning of the first HTTP redirection of UNIX timestamp. If there is no redirect, or a different source in the redirect, this value returns 0
  • PerformanceTiming. RedirectEnd: finally a HTTP redirect is complete UNIX time wrong, if there is no redirection, or a different sources in the redirection, this value will return zero
  • PerformanceTiming. FetchStart: ready to use the HTTP request to get the document of a UNIX timestamp, this point in time before the check for any application cache
  • PerformanceTiming.domainLookupStart: This value is consistent with Performance. FetchStart if persistent Connection is used or if this information is stored in a cache or local resource
  • PerformanceTiming. DomainLookupEnd: This value is consistent with Performance. FetchStart if persistent connection is used or if the information is stored in a cache or local resource
  • PerformanceTiming. ConnectStart: returns the HTTP request to the server sends a Unix timestamp, if it is used for persistent connections, the return value for fetchStart, etc
  • PerformanceTiming. ConnectEnd: browser and server connection is established (shaking hands and authentication process is over) the millisecond time stamp.
  • PerformanceTiming. SecureConnectionStart: the browser and server secure connection, the timestamp of the handshake, if the current page does not require a secure connection, it returns 0
  • PerformanceTiming. RequestStart: browser sent without weapons HTTP requests while reading the local cache) (or start a timestamp.
  • PerformanceTiming. ResponseStart: browser received from the server (or east local cache read) when the first byte of the Unix millisecond time stamp, if the transport layer at the beginning of failure and the connection is reopened after the request, the property will be made a new request number corresponding to the launch time.
  • PerformanceTiming. ResponseEnd: browser received from the server (or read heavy local cache, or read from the local resources) when the last byte (if before this HTTP connection has been closed, the return is closed) timestamp
  • PerformanceTiming. DomLoading: returns the current web page starts to parse the DOM structure (i.e. the Document. The readyState attribute to “loading”, the corresponding readystatechange event trigger) Unix millisecond time stamp.
  • PerformanceTiming.domInteractive: The Unix millisecond timestamp when the current web page structure (DOM tree generation) ends parsing and the embedded resource starts loading (that is, when the Document.readyState property changes to “interactive” and the corresponding readyStatechange event is triggered)
  • PerformanceTiming. DomContentLoadedEventStart: send DOMContentLoaded event parser, pure HTML is fully loaded and parsed (without waiting for the style sheet, image or a frame finished loading) at the time of the millisecond Unix timestamp
  • PerformanceTiming. DomContentLoadedEventEnd: all need the immediate execution of a script has executed, no matter the execution order of Unix millisecond time stamp
  • PerformanceTiming. DomComplete: the current Document parsing is complete, that is, the Document. The readyState to ‘complete’ and the corresponding readystatechange milliseconds Unix timestamp is triggered
  • PerformanceTiming. LoadEventStart: this document, the load event is sent when the Unix millisecond time stamp. If the event has not already been sent, its value will be 0
  • PerformanceTiming. LoadEventEnd: the load end of the event, the load event is complete Unix millisecond time stamp. If the event has not yet been sent or completed, its value will be 0.

— — — — —

1. The performance and application

  • Critical time node
 window.onload = function(){
            setTimeout(function(){
                let t = performance.timing
                console.log('DNS query time: ' + (t.domainLookupEnd - t.domainLookupStart).toFixed(0))
                console.log('TCP connection Time: ' + (t.connectEnd - t.connectStart).toFixed(0))
                console.log('Request Request time:' + (t.responseEnd - t.responseStart).toFixed(0))
                console.log(Dom tree parsing time: + (t.domComplete - t.domInteractive).toFixed(0))
                console.log('White screen Time:' + (t.responseStart - t.navigationStart).toFixed(0))
                console.log('DomReady time:' + (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0))
                console.log('onload time: ' + (t.loadEventEnd - t.navigationStart).toFixed(0))
 
                if(t = performance.memory){
                    console.log('JS memory usage ratio:' + (t.usedJSHeapSize / t.totalJSHeapSize * 100).toFixed(2) + The '%')}}}Copy the code

  • Implement a sortTiming function that temporarily calculates the difference between all timestamps and the earliest timestamp in chronological order
Object.entries(performance.timing.toJSON()).filter(item= >item[1]).sort((a,b) = >a[1]-b[1]).map((item, index, arr) = >[...item, item[1] - arr[0] [1]])
Copy the code

2. The DNS, rounding

Domain Name System (DNS) For converting Domain names to IP addresses (1 to many)

Domain name resolution

  • First, the browser first checks whether the local hosts file has the url color number relationship, if so, it calls the IP address mapping, complete domain name resolution
  • The local DNS parser cache is searched if not found, and the local DNS parser cache is returned if found
  • If no DNS server is found, the system searches for the local DNS server
  • Finally, search for IP addresses in the order of root domain server > top-level domain.com > layer 2 domain baidu.com > subdomain www.baidu.com

3. TCP

Seq indicates the packet number, SYN synchronization sequence number, ACK confirmation character (+ 1)

Other knowledge points

document.readyState

  • The document is still loading.
  • The document has been parsed and the “loading” state has ended, but sub-resources such as images, stylesheets, and frames are still loading.
  • The complete/complete document and all child resources have finished loading. The event representing the load state is about to be triggered.

When the value of this property changes, the readyStatechange event on the Document object is fired.