Odd technical guidelines

Today, I’m going to introduce a performance optimization tool: Preload.

The author is Xiaolu Huang, a front-end engineer from Qiwu and a member of the W3C Performance Working Group.

background

Sometimes in order to improve the performance of the initial loading of the web page, we choose to delay the loading and execution of some resources.

The other is when we want to load resources as early as possible, but wait until the right time to do so. The influencing factors of timing include dependency, execution condition and execution sequence.

The usual practice is:

  • Declare a resource (img, script, link) by inserting a page element. This approach couples resource loading and execution.

  • Load resources with 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 Preload comes in.

What is the Preload

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

  • <link rel=”preload” href=”some-resource-url” as=”xx”>

  • Add Link: <some-resource-url> to the HTTP header; rel=preload; as=xx

When the browser “sees” such a declaration, it loads resources in the background with a certain priority. 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.

Using Preload to load resources has several characteristics:

  • Preloading resources

  • Separation of resource loading and execution

  • Does not delay the page load event (unless the Preload resource happens to be the one blocking the window load)

You may be asking: How does Preload differ from other preloaded resources and separate load and execution schemes?

Ok, to satisfy your curiosity:

Vs. predictive parsing

The browser is smart enough to collect external links as it parses HTML. Add them to a list and download them in parallel in the background. Predictive parsing also implements pre-load and separation of load and execution. As shown in the figure:

So what’s the difference between it and Preload?

  • Only external linked resources collected while parsing HTML. Resources loaded asynchronously in the program cannot be collected in advance.

  • Browsers do not expose onload events like those in Preload, and thus have no more fine-grained control over resource execution.

vs. async

Async scripts are executed as soon as they are loaded and therefore block the Window’s onload event. And async is currently limited to script resources.

Preload can implement asynchronous loading functions like Async. And it’s not limited to scripts. For example, the following code implements the function of loading the CSS file to the web page immediately:

<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
Copy the code

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’s onload event.

vs. defer

Defer separates the loading and execution of the resources, and it ensures that the resources that defer are executed in the order they appear in the HTML. Like Async, it 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.

vs. Sever Push

Server Push of HTTP/2 also implements early loading of resources and separation of load execution. However, Server Push saves a network round trip. We can optimize Preload with Server Push. For example, the Server recognizes Preload resources in the document and actively pushes Preload resources.

If you don’t want the server to push, you can add the nopush attribute:

Link: </app/style.css>; rel=preload; as=style; nopush
Copy the code

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

When to use Preload

You can use Preload for any scenario you want to load before you execute, or to improve the rendering performance of your page.

Typical use cases:

  • 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 occur. Preload can be used to Preload to improve performance.

  • Load font files ahead of time. As the font file will not start loading until CSSOM is built and applied to the page element, the page font style will Flash out (Flash of Unstyled Text). So use Preload to explicitly tell the browser to load ahead. If the font file is downloaded before CSS takes effect, you can eliminate FOUT completely.

Browser compatibility

Preload has the following compatibility:

(Photo credit: https://caniuse.com/#search=preload)

As of this writing, browsers implementing 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.

thanks

Thanks to Wenli Ho and Songfeng Li for their valuable comments on the content and details of the article.

Refer to the link

  • https://www.w3.org/TR/preload/

  • https://developer.mozilla.org/zh-CN/docs/Web/HTML/Preloading_content

  • https://www.jianshu.com/p/24ffa6d45087

  • https://yoavweiss.github.io/link_htmlspecial_16

  • https://www.w3cplus.com/javascript/building-the-dom-faster-speculative-parsing-async-defer-and-preload.html

World of you when not

Just your shoulder

There is no


360 official technical official account

Technology of dry goods | | hand information activities

Empty,