I think if the webpage is relatively long, you can display one screen of content first, then let the scroll bar scroll to a certain distance and use ajax request to load it. If there is a lot of content to display, I think it is better to use pagination display, just like Taobao and JD.

Now using sprite images may not be the best way to optimize.
Using webpack can reduce entry files and package images in base64, which can perfectly solve your needs.

Let’s talk about a few briefly:

1. Using Sprite images is to reduce the number of requests. For example: there are 100 small icons. If they are separated into a single image, you have to continuously request the server 100 times to get them all. If they are merged into one image, you only need to request once.

2. js merging, css merging is the same.

Write here:
Multiple threads are browser-specific. Even if multiple threads request images, the browser has limitations. Currently, the number of concurrent requests in all browsers is generally limited to less than 10. That is to say, when this number is exceeded, it will be blocked
Speaking of on-demand loading, this depends on the actual situation. Sprite images are basically not used for large images exceeding 100K, and a small icon only has tens or hundreds of B or ten There is no burden when merging dozens or twenty kilobytes.
Compared with multiple requests, it is more "cost-effective" to make one request like this