Why is performance monitoring needed
The performance of the Web has an impact on retention. Google DoubleClick studies have shown that if a mobile page takes longer than 3 seconds to load, users will give up and leave. The BBC found that every second a page takes to load loses 10% of its users.
We want to know the status and trend of web application performance through monitoring, the performance after a certain release, whether the release has an impact on performance, the probability of service error perception, service stability…
What to monitor
The first thing we need to know is what should be monitored? What are the specific indicators?
Google developers put forward a RAIL model to measure application performance, namely, Response, Animation, Idle and Load, which respectively represent four different aspects of web application life cycle
The best performance index is: response to user input within 100ms; Animation or scrolling should produce the next frame within 10ms; Maximize free time; The page loading time does not exceed 5 seconds.
We can translate it into three aspects:
- Response speed: initial page access speed + interactive response speed
- Page stability: page error rate, such as resource loading error, JS execution error
- External service invocation: network request access speed
This article focuses on the first aspect, response speed, which is implemented using window.performance
Iii. Performance indicators
Several performance metrics for the user experience proposed by Google developers
-
FP: Marks the point at which the browser renders anything that is visually different from the content on the screen before navigation
-
First Contentful Paint: Marks the point in time when the browser renders the First content from the DOM, which could be text, image, SVG, etc
-
First Meaningful Paint: The First Meaningful Paint that marks the point in time when a hero element has been rendered. A hero element can be a video control on a video site, a page frame on a content site, a header on a resource site, etc
-
TTI: Time to Interactive: Time from the Time when a page is loaded to the Time when users can freely enter or operate the page
四, Window.performance foundation
The Performance interface can retrieve performance-related information from the current page by calling the read-only property window.performance
4.1 attributes
- navigation: Returns a
PerformanceNavigationObject. This object represents the navigation type that appears in the current browsing context, such as the number of redirects required to obtain a resource- RedirectCount: Indicates how many times the page was redirected before reaching it
- Type: how do I navigate to this page
- 0: The current page is performed by clicking links, bookmarks, and form submissions, or by scripting, or by entering the address directly in the URL, with type being 0
- 1: Click the refresh page button or the page displayed using the location.reload () method
- 2: when the page is accessed through history and forward and backward
- 255: Any other way, the type value is 255
timing:Have been abandoned, the use ofwindow.performance.getEntriesByType('navigation')In place of, i.ePerformanceNavigationTiming- TimeOrigin: An experimental function that returns a high-precision timestamp representing the start time of the Performance Measurement
- Memory: A non-standard extension added to Chrome that provides an object to retrieve basic memory usage. This non-standard API should not be used
- Onresourcetimingbufferfull: when the browser resources time performance will trigger buffer is full
4.2 the window. The performance. Timing attributes
21 attributes, as follows
| The property name | meaning |
|---|---|
| connectStart | returnStart time of establishing a connection with the serverIf the connection is persistent or the resource is fetched from the cache, the value is equal todomainLookupEnd |
| connectEnd | returnCompletion time of establishing a connection with the serverIf the connection is persistent or the resource is fetched from the cache, the value is equal todomainLookupEnd |
| domComplete | The time at which the HTML document is fully parsed |
| domContentLoadedEventEnd | The end time of the DOMContentLoaded event |
| domContentLoadedEventStart | The DOMContentLoaded event triggers the knot start time |
| domInteractive | returnThe current page DOM structure finishes parsing and starts loading embedded resources (such as JS and CSS)When, that is,Document. The readyState into interactiveThe time of |
| domLoading | Returns the currentWhen the DOM structure of the web page begins to parse, i.e.,When document. readyState becomes loadingThe timestamp |
| domainLookupEnd | returnQuery the end time of DNSIf the connection is persistent or the resource is fetched from the cache, the value is equal tofetchStart |
| domainLookupStart | returnQuerying the DNS start timeIf the connection is persistent or the resource is fetched from the cache, the value is equal tofetchStart |
| fetchStart | If you want to use the “GET” request method to GET a new resource, fetchStart returnsTime between the time the browser sends a request and the time before the cache is detectedOtherwise, return directlyBrowser request time |
| loadEventEnd | returnOnload completion timeWhen the load event has not yet been triggered, it returns zero |
| loadEventStart | returnOnload Start timeWhen the load event has not yet been triggered, it returns zero |
| navigationStart | returnLast URL uninstalled time, if there is no previous URL, then this value equalsfetchStartIn the PerformanceNavigationTiming has been abandoned |
| redirectEnd | returnThe time when the last HTTP redirect was completedIf there is no redirect, or a different source in the redirect, this value will return 0 |
| redirectStart | returnThe first HTTP redirection start timeIf there is no redirect, or a different source in the redirect, this value will return 0 |
| requestStart | returnThe browser makes an HTTP request to the server |
| responseEnd | returnThe browser receives (or reads from the local cache, or reads from a local resource) the last byte from the server(if the HTTP connection has been closed before then, the closed time is returned) |
| responseStart | returnThe browser receives the first byte from the server (or reads it from the local cache). If the transport layer fails after initiating the request and the connection is reopened, this property will be counted as the corresponding initiation time of the new request |
| secureConnectionStart | Returns the handshake time when the browser and the server started the secure connection. If the current web page does not require secure connection, 0 is returned |
| unloadEventEnd | returnUnload Processing completion time, if the current URL is homologous with the previous URL, the returned value is the time before the user agent of the previous page unloaded to this page, or 0 if it is different from the previous domain or there is no previous URL |
| unloadEventStart | returnUnload Start processing time, if the current URL is homologous with the previous URL, the returned value refers to the time since the last page was unloaded to the user agent of this page, if it is different from the last domain or there is no previous URL, the returned value is 0 |
4.3 PerformanceNavigationTiming properties
The timing field is the same as that in 1.2. The differences are as follows:
(1) More fields than 1.2 Timing
| The property name | meaning |
|---|---|
| decodedBodySize | returnSize of encoded bytes |
| duration | namelyPerformanceNavigationTiming.loadEventEnd (en-US) 和 PerformanceEntry.startTime (en-US)The difference between attributes |
| encodedBodySize | returnSize of bytes before encoding |
| entryType | return"navigation" |
| initiatorType | return"navigation" |
| name | Return to the pageurl |
| nextHopProtocol | Network Resource Protocol |
| redirectCount | The redirection number |
| serverTiming | Returns a list ofPerformanceServerTiming |
| startTime | returnThe system starts recording the performance time. 0 |
| transferSize | Response header and response body size |
| type | astringIndicates the navigation type. The value can be:navigate“,”reload“,”back_forward“Or”prerender“ |
| workerStart | If there is a worker, the start time of the worker is returned |
(2) The following fields are less than 1.2 Timing
DomLoading, navigationStart
PerformanceTiming each attribute record timestamp, all properties are calculated based on navigationStart time consuming, and the properties in PerformanceNavigationTiming is time-consuming has good computing, NavigationStart and domLoading are removed
4.4 Timing Render sequence of fields
5. Calculation method of each index
| indicators | calculation | instructions |
|---|---|---|
| Total page loading time | loadEventEnd – startTime | Refers to the time it takes for the page to be fully loaded, when the onLoad event is triggered |
| DNS Resolution Time | domainLookupEnd – domainLookupStart | It refers to the time required by the DOMAIN name Resolution Service (DNS) to resolve a specified domain name into an IP address |
| TCP Connection Time | connectEnd – connectStart | Indicates the time taken by the browser to establish a TCP/IP connection with the WEB server |
| SSL Connection Time | location.protocol === ‘https:’ ? connectEnd – secureConnectionStart | This parameter is valid only in HTTPS mode. It is part of the TCP connection time and indicates the handshake time of a secure connection |
| Network request Time | responseStart – requestStart | The time it takes to start sending a request to the server to return the first byte |
| Data Transmission time | responseEnd-responseStart | Refers to the time it takes the server to return the first byte to the last byte |
| DOM Parsing Time | domContentLoadedEventEnd – responseEnd | ResponseEnd refers to the time it takes to complete DOM parsing after a page request completes. The DOM parsing time is determined by the complexity of the page |
| Resource Loading Time | loadEventEnd – domContentLoadedEventEnd | Refers to the time taken after DOM parsing is complete until the page is fully loaded |
| The first package time | responseStart – startTime | The time between the page request and the time the browser starts receiving data |
| Page rendering time | loadEventEnd – responseEnd | Equal to page full load time – HTML complete load time (see metrics below) |
| Page full load time | loadEventEnd – startTime | Refers to the time it takes for the page to be fully loaded, when the onLoad event is triggered |
| Bad time | Give priority to use the latest standard performance. GetEntriesByType (‘ paint ‘) [0]. StartTime, does not support using Chrome, IE provide firstPaintTime, Chrome.loadtimes ().firstpaintTime or performance.msfirstpaint. loadEventEnd – startTime | First render time refers to the time it takes for the first text or image to appear on a page |
| Page loading time | loadEventEnd – startTime | Refers to the time it takes for the page to be fully loaded, when the onLoad event is triggered |
| HTML loading time | responseEnd – startTime | All HTML is loaded (not including page rendering time), including DNS, TCP, Request, and Response |
| First interaction time | domInteractive – startTime | Refers to the start time of the page DOMContentLoaded event so that the page can interact |
| The first screen time | There are two methods: the first method is to calculate the loading time of all images in the first screen area, and then take its maximum value; The second way: The window.MutationObserver is used to monitor the changes of all elements on the first screen and record the time. Finally, the maximum value is taken (the repeated values with the same score will be removed), and the calculated time needs to add domInteractive (interactive time). At present, the system adopts the second implementation mode. If the second is not available, take domInteractive, but this value will be smaller than the actual first screen time | The first screen time is also called fully interactive time, that is, the first screen time of the entire page is completely rendered and the user is fully interactive. Generally, the first screen time is less than the time of the page is fully loaded. This indicator can measure the page access speed |
6. First screen time
We know that the first screen time is an important indicator, but it is difficult to get from performance. What are the main methods for calculating the first screen time?
- User defined dot – the most accurate way (only the user knows best when the first screen load is completed)
- Lighthouse uses Trace events recorded during chrome rendering
- Use Chrome DevTools Protocol to get the number of page layout nodes. The idea is to capture the point in time when the page has the maximum layout change
- Aegis method: use MutationObserver interface to monitor the node changes of document object.
- Check whether the changed nodes are displayed on the first screen. If they are, the current time point is the first screen rendering time. However, there is also the loading time of the image in the first screen to consider. Iterate over all the image entities obtained from Performance.getentries () and update the rendering time of the first screen according to the initial loading time and the loading completion time of the image.
- The ability to monitor changes to the DOM tree using the MutationObserver interface is part of the DOM3 Events specification.
- Method: A div was inserted into the content module of the first screen, and dom events of the div were monitored using Mutation Observer API to determine whether the height of the div was greater than 0 or the specified value. If the height was greater than 0, it indicated that the main content had been rendered and the time of the first screen could be calculated.
- A patent: in loading state, it is used to determine whether the current page height is greater than the screen height. If so, the screen image of the current page will be obtained, and whether the page rendering is full screen can be determined by pixel by pixel comparison.
Refer to the article www.alloyteam.com/2020/01/141…