Use Navigation Timing to measure page loading time and navigationtiming

Use Navigation Timing to measure page loading time and navigationtiming

I recently read a book titled "web Performance Practice log", in which chapter 13th "Network Timing" describes a relatively new method for calculating the loading time of each part of a page, this is what the W3C Web performance team is doing. Next I will give you a rough introduction:

First, let's start with what this article will introduce. If you want to write a piece of code to calculate the loading time of the entire page, we generally do this: get the start time and end time of page loading. The two minus values are the page loading time. The correct code is as follows:

1 
This is a simple script for calculating the page loading time. But what if we want to know more about the resource loading time? For example, if I want to know the time when the dom content is loaded, rather than the page loading time, the above Code is obviously not enough.
However, W3C provides the window. performance. timing Method, allowing us to easily obtain the loading time of each part of the page. The specific code page is very simple, as shown below:
1 
After practice, we found that the page loading time obtained through the above method is slightly more than the first retrieval time in several milliseconds, which may vary depending on the size of different pages, however, the time obtained in the above method must be more accurate than the time we wrote at the beginning. Similarly, if we want to know the time when the dom content is loaded, the code will be changed:
1 <script> 2 function onLoad () {3 var now = new Date (). getTime (); 4 var dom_load = performance. timing. domComplete-performance. timing. navigationStart; 5 alert ('page loading time: '+ dom_load); 6} 7 </script>
In this way, we can even get