Page Load Time Get Through Navigation Timing API in Javascript

The Navigation Timing API provides data that can be used to measure web site performance. Unlike JavaScript-based libraries which are historically used to collect similar information, the Navigation Timing API can be more accurate and reliable.

Uses and Concept :
You can use the Navigation Timing API to collect performance data at client time, which you can then transmit to the server using XMLHttpRequest or other technologies. In addition, the API allows you to measure data that was difficult to obtain earlier, such as how long it takes to load the previous page, how long the domain lookup takes, the total time used to execute load handlers of the window Is, and so forth.

Interfaces:

Performance: You can use the Navigation Timing API to collect performance data at client time, which you can then transmit to the server using XMLHttpRequest or other technologies. In addition, the API allows you to measure data that was difficult to obtain earlier, such as how long it takes to load the previous page, how long the domain lookup takes, the total time used to execute load handlers of the window Is, and so forth.

Performance Navigation Timing: The browser's document provides methods and properties to store and retrieve matrices about navigation events. For example, this interface can be used to determine how long it takes to load or unload a document.

Performance Timing: Used as a type of time value, this type of items contains information about the time that can provide insight into web page performance.

Performance Navigation: The type used to return the value of the navigation, which contains information explaining the context of the load operation described by this demonstration example.

The Navigation Timing API can be used to collect performance data on the client side to be sent to the server via XHR, as well as to measure the data, which can be measured by other means like time to unload the previous page It was very difficult, window.onload total time, etc

Examples:

Calculate the Total Load Page Time:
To count the total amount of time it took to load the page, you can use this code:

var perfData = window.performance.timing; 
var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;

This reduces the time the navigation started (NavigationStart) from which time the load event handler returns (loadEventEart). This gives you the time to load the said page.

Calculate Request response Time:

You can calculate the time elapsed between the start of a request and the completion of receiving the response by using code like this:

var connectTime = perfData.responseEnd - perfData.requestStart;

Here, at the time the request was initiated (request start). From the time the reaction was ending, it was being received (responseEnd).

Calculate Page Render Time:

As another example of an interesting piece of data you can get by using the Navigation Timing API, which you can not easily obtain, you can get the time it takes to render the page:

var renderTime = perfData.domComplete - perfData.domLoading;

It starts from that time, when the loading of the DOM and its dependence is complete (domComplete) and at the same time decreasing by the time the DOM parsing started (domloading).