Here I mainly introduce two methods: preload and prefetch
Preload: loads in advance
Preload, as its name implies, is a method of preloading by declaring to the browser that a resource needs to be submitted for loading, which is executed immediately when the resource is actually used, without waiting for network consumption.
Usage:
The link mode
When the browser parses this line of code it loads the href resource but doesn’t execute it until it’s actually used
HTTP response header mode
Link:example.com/other/style… ; rel=preload; as=style
This is faster than loading resources through link, and the request is preloaded before the parsed page is returned.
Preload compatibility: IE and Firefox are not supported, the compatibility coverage reaches 73%.
Prefetch: prefetch
Different from preload, prefetch tells the browser about a certain resource that will be used in the future, and the browser will load the corresponding resource at its leisure. If it can predict the user’s behavior, such as lazy loading or clicking on other pages, it is equivalent to loading the required resource in advance. It is used in the same way as preload:
The link mode
HTTP response header mode
Link:example.com/other/style… ; rel=prefetch; as=style
Prefetch is more compatible than Preload and can reach nearly 80% coverage
Summary of the two methods:
When a resource is fetched by preload or Prefetch, it is stored in the in-memory cache waiting to be used. If the resource does not exist in an effective caching mechanism, it is stored in the HTTP cache and can be used by different pages. When the page uses the resource, preload has not finished downloading the resource. At this point, no second download will occur, and the script will wait for the first download and execute.
In the case of Preload, it stops preload fetching resources as soon as the page is closed, whereas in the case of PreFETCH resources, requests initiated by PreFetch continue without interruption even after the page is closed. Do not mix preload and prefetch. They are applicable to different scenarios. Using preload and prefetch for the same resource will cause secondary downloads
And last but not least:
Preload tells the browser that the page must need resources that the browser must load, while prefetch tells the browser that the page may need resources that the browser may not load. So a suggestion: Use Preload for resources that are necessary for the current page and Prefetch for resources that are likely to be used in future pages.
With preload and Prefetch, if the resource can’t be cached, it may waste bandwidth. Use it cautiously on mobile because you can use preload to cache certain resources for performance, but if you don’t use it, you’re doing nothing. On mobile, this amounts to a waste of user traffic, so be specific about what you want to preload.
Use examples:
First, load the text font in advance. Because the font file will not start loading until the CSSOM tree is built and applied to the page element, the page font style will flash, so use a preload display to tell the browser to load early. If the font file is downloaded before the CSS takes effect, the page flash effect can be eliminated completely.
Second, use preload to preload the content of the second screen. In web development, lazy loading is a common optimization method for non-first screen, so we can load the resources required by the second screen through preload after page onload, and the user can see the content of the second screen faster when browsing the content of the first screen.
Third, after the completion of a page is loaded, all links on a page can be analyzed and judged the user may click on the page, analysis to extract the next-hop prefetch all resources used for loading on a page (here do not use preload, because not necessarily click), the browser will when building houses to load, when users click on the links to hit the cache, This can effectively improve the first screen rendering time of the next page.
Four, for commodity list page, the user the mouse stay at the time of a product, can go to the analysis of commodity details page and the resource needed to advance open preload loading, similar to the third point, is used to predict the behavior of users and make some preloading method, the difference is that when the user stays on the goods, click on the hit ratio is higher, Preload can load resources immediately, effectively improving cache hit ratio.