In B/S architecture, users use browsers to access back-end services. When developing products, we need to pay attention to user experience, which not only includes interaction friendliness, but also performance indicators. Common performance indicators for back-end development may include: response time, throughput, etc. In addition, performance analysis of browser page navigation, HTML data parsing, and waiting stages for generating displayable bitmaps is also very important. The front-end performance indicators are shown in the figure below. This article briefly introduces two tools for obtaining performance analysis data displayed on browser pages.
1.Skywalking (8.2 and above)
1. Install dependencies
npm install skywalking-client-js –save
The local backend project is embedded with the front-end UI, so when installing, you can directly enter the front-end directory to install.
After successful installation, the directory will be as shown below:
2.Introduce dependencies
import ClientMonitor from ‘skywalking-client-js’;
Just introduce the corresponding dependency on the page that needs to be monitored, as shown in the following figure:
Note: There are two skywalking tracking information collectors, one is gRPC for back-end services, and the other is Http to collect collection information from client browsers. The default port of Http is 12800, and the default port of gRPC is 11800. Front-end access to back-end services may exist There is a cross-domain problem, so you can configure the relevant proxy in the front-end vue.config.js.
3. The configuration is successful, and the result after access is as shown in the figure
2. Chrome Performance Api monitors web page performance
Chrome browser provides us with Performance performance detection and debugging tools. In addition, W3C has also defined a set of Performance standards. Based on the standards, various browser manufacturers provide a series of basic APIs for monitoring network performance. These APIs can detect white screen time, first screen time, user-operable time nodes, and page totals. Download time, DNS query time, TCP link time, etc. We can completely use this to build a simple performance monitoring tool. Of course, the monitoring system includes several processes: data collection->data storage->cleaning->monitoring. However, for now, we only consider the collection phase when we briefly use the Performance Api.
All APIs & properties of performance are mounted in the performance attribute under the window. You can see a series of properties currently provided. For an introduction to each attribute, refer to the explanation of the API on the Internet. There is a lot of information for query.
As shown above As shown, performance contains three objects, namely memory, navigation, and timing.
-
memory: It is related to memory. It provides a description of memory usage. We can use this attribute to subscribe to page memory changes.
-
jsHeapSizeLimit: Heap memory size limit
-
totalJSHeapSize: the size of the total heap memory
-
usedJSHeapSize: used heap memory size
-
-
Navigation: The meaning is the source information of the page, describing how the page jumps here. This object has 2 attribute values.
-
redirectCount : records the number of redirects. If there is a redirect, how many times the page jumps through redirects. The default is 0.
-
type ： The way the page is opened, the default is 0, the possible values are “0: means entering the page normally (non-refresh, non-redirect)”, “1: means through window.location.reload “Refreshed page”, “2: Indicates the page entered through the browser’s forward and back buttons”, “255: Indicates the page entered by other than the above methods”
-
-
Timing: Provides high-precision measurements of a series of key time points during the page loading process. It includes a series of time data such as network, parsing, and loading. We monitor web page performance based on the attributes provided here. In order to facilitate understanding, I found a picture from the Internet to explain the meaning of key nodes.
-
navigationStart : The timestamp when a page unloading ends. If there is no previous page, then this value will be the same as the value of fetchStart
-
redirectStart : The timestamp when the first http redirection starts. If there is no redirection or the redirection is to a different source, then the value is returned as 0
-
redirectEnd : The timestamp when the last HTTP redirect completed. This value is also returned as 0 if there is no redirect, or if the redirect is to a different source.
-
fetchStart : The time when the browser is ready to fetch the document using an http request (occurs before checking the local cache).
-
domainLookupStart : The time when DNS domain name query starts, if local cache is used, or persistent link, this value is the same as fetchStart value
-
domainLookupEnd : The time when the DNS domain name query is completed, if a local cache is used, or a persistent link, this value is the same as the fetchStart value
-
connectStart : The time when HTTP starts to establish a connection. If it is a persistent link, this value is the same as the fetchStart value. If an error occurs at the transport layer and the connection needs to be re-established, then what is displayed here is New link start time
-
secureConnectionStart : The time when the HTTPS connection started, if it is not a secure connection, the value is 0
-
connectEnd: The time when HTTP completes establishing the connection (completes handshake). If it is a persistent link, this value is the same as the fetchStart value. If an error occurs at the transport layer and the connection needs to be re-established, then the completion time of the newly established link is displayed here.
-
requestStart : The time when the http request starts reading the real document, including reading from the local cache and reconnecting due to link errors.
-
responseStart : The time when the response started to be received (the time when the first byte was obtained). Includes reading cache from local
-
responseEnd : The time when all HTTP responses are received (the last byte is obtained). Includes reading cache from local
-
unloadEventStart : The timestamp of unloading the previous web page (same domain as the current page). If there is no previous web page or the previous web page is in a different domain, then the value is 0
-
unloadEventEnd : Corresponds to unloadEventStart, and returns the timestamp when the callback function bound to the unload event of the previous web page has been executed.
-
domLoading : The time to start parsing and rendering the DOM tree
-
domInteractive : Time to complete parsing the DOM tree (only the DOM tree parsing is completed, but the resources of the web page are not started to be loaded)
-
domContentLoadedEventStart ： After DOM parsing is completed, the time when resources in the web page start loading
-
domContentLoadedEventEnd : After the DOM parsing is completed, the time when the resources in the web page are loaded.
-
domComplete : The time when DOM tree parsing is completed and resources are ready. Document.readyState becomes complete and readystatechange related events will be thrown
-
loadEventStart : The load event is sent to the document. That is, the time when the load callback function starts executing. If no load event is bound, the value is 0.
-
loadEventEnd : The time when the callback function of the load event is completed. If the load event is not bound, the value is 0
The calculation and reporting of some indicators that we often pay attention to can be realized through the performance API, as shown in the figure below, mainly referring to the indicators of Keynote Tingyun: https://demo.tingyun.com/doc/browser/metric/indicator.html
//Get the performance api from the browser when the user accesses
var item = performance.timing;
const dnsTime = item.domainLookupEnd - item.domainLookupStart;
const isSSL = item.name.includes("https");
const sslTime = isSSL ? item.connectEnd - item.secureConnectionStart : 0;
const tcpEnd = isSSL ? item.secureConnectionStart : item.connectEnd;
const tcpTime = tcpEnd - item.connectStart;
const stalledTime = item.requestStart - item.fetchStart - dnsTime - tcpTime - sslTime;
//Stalled: [item.fetchStart, item.fetchStart + stalledTime]
//DNS: [item.domainLookupStart, item.domainLookupEnd]
//TCP: [item.connectStart, tcpEnd]
//SSL: [tcpEnd, item.connectEnd]
//Request response: [item.requestStart, item.responseStart]
//Content transmission: [item.responseStart, item.responseEnd]