Can js detect single file loading progress

Question

Recently, the company has a requirement to display the loading progress of resources when our mobile webpage is opened. I put for example the loading of the overall image as data for the progress bar. But the leader wants to be able to display the loading progress of single file resources (such as css, js, pictures and other resources when the network is extremely poor). Later, I read some information on the Internet and they were all about downloading (although I also feel that downloading and caching are not the same thing==), and I feel that it is not required by the leadership. So I posted this late at night. It would be better if there is a small demo for me to read.

Answer 1

The loading time of a single file can be processed through the Perfromance API. Use performance.getEntries() to obtain the time data of all resource requests. Here is an article, you can refer to the initial exploration of performance - Monitoring web page and program performance, I hope it can help. you.