There is an optimization method called Preload

In program development, optimization is essential, and today’s optimization method is called Preload.

Preload

  • In order to improve the performance of web page loading, we usually choose to delay loading some resources and execution.
  • The other situation is that you want to load resources as early as possible, but wait until the right time to execute. The influencing factors include dependency condition, execution condition, execution order and so on. Usually we do this:
  1. Declaring a resource (such as IMG, link, script) by inserting a page element couples the loading and execution of the resource
  2. Load resources through AJAX. This approach solves the execution timing problem by loading resources only when the time is right. But the browser doesn’t preparse, so it doesn’t load in advance. In addition, if the page has a large number of blocking scripts, this can cause delays.

Is there a way to preload resources and decouple loading and execution? This is where the Preload solution comes in

What is the Preload

Preload is a preload keyword that explicitly declares to the browser that a resource needs to be preloaded. The usage is as follows:

  • Insert this line into the head tag, or you can use JS generation to insert it into the head tag.
<link rel="preload" href="resource-url" as="xxx">
Copy the code
  • Add to the HTTP request headerLink:<resource-url>; rel=preload; as=xxWhen the browser “sees” such a declaration, it loads the resource in the background with a certain priority, and the loaded resource is placed in the HTTP cache. When it comes time to actually execute, you can pull the resource from the HTTP cache by loading it with tags or code in the normal way.

The characteristics of the Preload

  • Preloading resources
  • Separation of resource loading and execution
  • The page load event will not be delayed (unless the Preload resource happens to be the one blocking the window load)

How does Preload differ from other preloaded resources and separate load and execution schemes?

  • Predictive analytic scheme

While the browser parses the HTML resource, the external link resource can be collected at the same time and added to a list for parallel downloading in the background. Predictive parsing also implements pre-load and separation of load and execution.

Difference between preload and preload:

  1. Only external linked resources collected while parsing HTML. Resources that are loaded asynchronously in an application cannot be collected in advance.
  2. Browsers do not expose onload events like those in Preload, and thus have no more fine-grained control over resource execution.
  • async

Async scripts are executed as soon as they are loaded, blocking the Onload event of the window, and async is currently limited to loading script resources.

Preload can be loaded asynchronously just like Async, and is not limited to scripts. For example, the following code will execute the CSS code as soon as it is loaded, and apply it to the web page.

<link rel="preload" href="./style.css" as="style" onload="this.rel='stylesheet'">// Note: if the page has a synchronization blocking script, the style will not be applied until the script is complete. // This is because Preload resources do not block the window onload event.Copy the code
  • defer

Defer decouples the loading and execution of the resources and ensures that the resources defer are executed in the order they appear in the HTML. But it, like Async, currently only works with script resources.

Preload applies to a variety of resource types. The Preload resources can also defer execution and maintain the order of execution just like the deferred resources.

  • server push

HTTP/2’s Server Push also implements pre-loading of resources and separation of load execution. However, Server Push saves a network round-trip. We can optimize Preload in combination with Server Push. For example, if the Server recognizes Preload resources in the document, it will actively Push Preload resources. Link: <./style.css>; rel=preload; as=style; nopush

In addition, Server Push can only Push local resources. Preload supports cross-domain resources.

When to use Preload

Preload can be used for any resource that needs to be preloaded before it is executed, or for scenarios that want to improve page rendering performance.

Such as:

  • In single-page applications, route files are loaded in advance to improve the rendering speed during route switching. Large single-page applications now typically load routing files asynchronously. When users switch routes and load corresponding modules asynchronously, performance problems may occur. You can use Preload to Preload and improve performance.
  • Load font files ahead of time. As we all know, font files don’t start loading until CSSOM is built and applied to page elements, which causes the page to flash (FOUT), so you can use Preload to load fonts and eliminate FOUT.

Preload compatibility problems

Browsers that implement Preload on PCS include Chrome 50+ and Saferi 11.1+. Edge 17+ supports HTML but does not support HTTP headers. Mobile: iOS Safari 11.4+, Android Chrome 67

Browsers that do not support Preload will automatically ignore it and use normal loading. Therefore, this feature can be used as an incremental enhancement in our web application.

SEE CAN I SEE for details