What do you think are the basic attributes of Perfomance

Jane said

Perfomance is a standard API provided by browsers for developers to monitor the basic performance of the front-end. Through the data provided in the API, front-end developers can quickly and efficiently locate the various aspects of performance loss.

The performance object

The performance object is a property mounted on window, obtained by using window.performance or directly using performance:

Basic Attributes

1.navigation

Type, which returns a value indicating the source of the load. 0, namely perfortance. Navigation. TYPE_NAVIGATE, click on the link, the address bar of input, the form is submitted, the script operation, etc. 1, namely perfortance. Navigation. TYPE_RELOAD, click the reload button, the location. Reload. 2, namely perfortance. Navigation. TYPE_BACK_FORWARD, click on the forward or back button. 255, namely perfortance. Navigation. TYPE_RESERVED, any other sources.
Redirect: Indicates the number of times a web page is redirected.

2. Memory (currently only supported by Google)

UsedJSHeapSize: Memory occupied by js objects (including v8 internal objects). If this value is greater than totalJSHeapSize, memory exposure may occur.
TotalJSHeapSize: Available memory.
JsHeapSizeLimit: specifies the memory size limit.

3.timeOrigin

Performance. TimeOrigin returns a value representing the timestamp at the start of the performance test.Copy the code

4. Timing (a total of 21 timing models will be “scrapped”/replaced!!)

DNS query time: domainLookupEnd - domainLookupStart. If cache or local resources are used, the result is 0.Copy the code

DomainLookupStart: indicates the timestamp when the domain name query starts. If persistent Connection, cache, or local resources are used, this value is such as fetchStart.
DomainLookupEnd: indicates the end time stamp of the domain name query. If persistent Connection, cache, or local resources are used, this value is consistent with fetchStart.
FetchStart: Indicates that the browser is ready to fetch the timestamp of the document using an HTTP request. This point in time is before any application caches are checked.
```
TCP connection time: connectEnd - connectStart. If cache or local resources are used, the result is 0.Copy the code
```
ConnectStart: Returns the timestamp when the request started sending information to the server. If persistent Connection is used, this value is equal to fetchStart.
ConnectEnd: Returns the timestamp when the connection between the browser and the server is established. If persistent connections are used, this value is equal to fetchStart. Connection establishment refers to the completion of all handshake and authentication processes.
FetchStart: Indicates that the browser is ready to fetch the timestamp of the document using an HTTP request. This point in time is before any application caches are checked.
```
Request Request time: responseEnd -responsestart.Copy the code
```
ResponseStart: Returns the timestamp when the browser received the first byte from the server (or read it from the local cache).
ResponseEnd: Returns the timestamp at which the last character was received by the user agent and the earlier of the time the current connection was closed. Again, documents may come from a server, cache, or local resource.
```
Parsing dom tree takes time: domcomplete-dominteractive.Copy the code
```
DomComplete: Returns the timestamp when the DOM structure of the current web page was generated. When the Document.readyState property becomes “complete” and the corresponding readyStatechange event occurs.
DomInteractive: Returns the timestamp when the DOM structure of the current page finishes parsing and the embedded resources start loading. (that is, when the Document.readyState property changes to “interactive” and the corresponding readyStatechange event fires).
```
ResponseStart - navigationStartCopy the code
```
ResponseStart: Returns the timestamp when the browser received the first byte from the server (or read it from the local cache).
NavigationStart: Represents the timestamp at the end of an unload from the previous document in the same browser context. If there is no previous document, this value is equal to fetchStart.
FetchStart: Indicates that the browser is ready to fetch the timestamp of the document using an HTTP request. This point in time is before any application caches are checked.
```
DomReady time: domContentLoadedEventEnd - navigationStart.Copy the code
```
DomContentLoadedEventEnd: Returns the timestamp of all scripts that need to be executed on the current page.
NavigationStart: Represents the timestamp at the end of an unload from the previous document in the same browser context. If there is no previous document, this value is equal to fetchStart.
FetchStart: Indicates that the browser is ready to fetch the timestamp of the document using an HTTP request. This point in time is before any application caches are checked.
```
Onload time: loadEventEnd - navigationStart.Copy the code
```
LoadEventEnd: Returns the time stamp at the end of the run of the callback function for the load event on the current page. If the event has not already occurred, return 0.
NavigationStart: Represents the timestamp at the end of an unload from the previous document in the same browser context. If there is no previous document, this value is equal to fetchStart.
FetchStart: Indicates that the browser is ready to fetch the timestamp of the document using an HTTP request. This point in time is before any application caches are checked.
```
At other timesCopy the code
```
UnloadEventStart: Indicates the timestamp when the Unload event is thrown. If there is no previous web page or the previous page is redirected to a different domain, this value is 0.
UnloadEventEnd: Indicates the timestamp when the Unload event processing is complete. If there is no previous web page or the previous web page is in a different domain, 0 is returned.
RedirectStart: Indicates the timestamp when the first request redirection started. This value returns 0 if there is no redirect, or if a different source is being redirected.
RedirectEnd: Indicates the timestamp when the last request redirection is complete. (That is, the time when the last byte of the request response was received). This value returns 0 if there is no redirect, or if a different source is being redirected.
SecureConnectionStart: Returns the timestamp when the handshake between the browser and the server began the secure link. If the user agent does not have a corresponding property, the property will be set to undefined. And 0 is returned if the current domain name is not HTTPS.
RequestStart: Returns the timestamp when the browser made a request to the server (or started reading the local cache).
DomLoading: Returns the timestamp when the DOM structure of the current web page started parsing. (that is, when the Document.readyState property becomes “loading” and the corresponding readyStatechange event is triggered).
DomContentLoadedEventStart: returns the timestamp of the DOMContentLoaded event occurs for the current page (i.e., after parsing the DOM structure, all the scripts start runtime).
LoadEventStart: Returns the timestamp at the start of the callback function for the load event on the current page. If the event has not yet occurred, 0 is returned.

Refer to figure

Write in the last

I want to make it clear that I’m not a professor, I’m just a sharer, a discussant, a learner with a different opinion or a new idea, come forward and we’ll work on it together. While sharing, it is not only the sharer who is learning and improving, but also the sharer.

Knowledge is everywhere, and when it is gathered, it is yours.

Since useful, might as well like, let more people understand, learn and improve.

extra

I wrote a front-end base performance monitoring package: github.com/Indifferenc…

NPM install performance-kits –save

Ask for stars, wait for bricks, ORz, let’s tie a good fate ~