javascript - How to optimize web page opening speed?

Question

1. Reduce the number of file requests,
2. Use sprite images.
3. Use lazy loading.
(How to reduce the number of file requests?)
(Why can it be optimized by reducing the number of file requests? If I have 10 10k files and one 100k file, my 10 10k files use multi-threading at the same time. It should be introduced faster than a 100k one.) ()
Please give me the answer. . . . . . Grateful. .

Answer 1

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.

Answer 2

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.

Answer 3

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