The purpose of writing this article is to make a knowledge point record, lest behind forget.
When does the browser start rendering data? Presumably most of the answers are: of course, the back-end interface returns the data and starts rendering. But is it? Recently, there is a requirement in the company’s project that the amount of data to be processed is a little bit large, and the front-end rendering is a little bit slow. When troubleshooting problems, it will definitely involve the time of data returned by the back-end. Most of the time the interface returns data is checked in the Developer tools network panel, as shown in the figure below
The figure above shows the time spent by the interface in each phase. The specific phases are available on the website and will not be described here. Focus on the picture below
We can see more details about the same interface in the Performance panel. As you may have noticed, what I’ve outlined in red is the amount of time the interface takes, so to speak, yes and not quite.
We can see that the total time of timing in the second figure is the same as that of network transfer in performance, but there is another resource loading. What time is the resource loading? I did some research on the Internet, but most of it was about how to use Performance, until I came across this article
Resource loading is the time it takes the browser to prepare a resource for the rendering process. Source code here will not be posted, we are interested in their own look.
Therefore, the browser enabled the rendering process to render data after network transfer + resource loading. A small cold knowledge point, if have expression wrong or wrong place, still ask each big guy to point out.