Open the debugging tool of the chrome browser, as shown in the figure:
DOMContentLoaded : DOM tree construction is complete. That is, the time when the HTML page parses the HTML structure from top to bottom to the closing tag at the end
Load : When the page load is complete. After the DOM tree is built, continue to load external resources such as pictures, audio, video, etc. in html/css. After the loading is completed, the page is considered to be loaded.
Generally speaking, the response time of the website means the Load time, because the user can perceive this more easily, at this time, the user can see that the browser has completed the work and the page is ready.
Relationship : DOMContentLoaded will be shorter than the Load time, and the time difference between the two is roughly equal to the loading time of external resources.
Finish : The time from sending all http requests on the page to the completion of the response, limited by the HTTP1.0/1.1 protocol, the number of concurrent requests for a single domain name is 6, that is, Finish is all requests (not just XHR requests, but also DOC, img, js , requests for resources such as css) is completed under the limit of 6 concurrency.
In some cases, it seems that Finish never stops and continues to increase, so it may not be the best assessment of web page response time.
Relationship : Finish time is not directly related to DOMContentLoaded and Load time. After testing, it will appear that Finish time is longer than Load time and may be shorter than Load time.
- The time of Finish is longer than that of Load, which means that the page has a considerable amount of requests.
- The time of Finish is shorter than that of Load, which means that there are very few page requests. If the page is a static page with only one
HTML document request, the Finish time is basically equal to the time of HTML document request.