When performance is optimized, how do you calculate the page load time?

how do you calculate the page load time?

Apr.10,2022

Open F12:

clipboard.png

clipboard.png

Click the one indicated by the arrow first, and the page will automatically reload and start recording. After the page is loaded, it will automatically stop and give the analysis report.

Web performance APIs

you can get all kinds of time, such as dns parsing time, connection time, jump time, load time and so on.
these API need to be used after the page is loaded, and you need to read all kinds of data in the window.onload event, because many values cannot be obtained until the page is fully loaded.

< H2 > Page load API < / H2 >
window.performance.timing returns a read-only PerformanceTiming object that is used to analyze the overall performance metrics of the page. Commonly used statistics are as follows:
  • DNS query time: domainLookupEnd-domainLookupStart
  • TCP link time: connectEnd-connectStart
  • request request time: responseEnd-responseStart
  • it takes time to parse dom trees: domComplete- domInteractive
  • White screen time: responseStart-navigationStart
  • domready time: domContentLoadedEventEnd-navigationStart
  • onload time: loadEventEnd-navigationStart
Menu