Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the methods of asynchronous loading CSS". In daily operation, I believe many people have doubts about what are the problems of asynchronous loading CSS methods. Xiaobian consulted various materials and sorted out simple and easy operation methods. I hope to help you answer the doubts of "what are the methods of asynchronous loading CSS"! Next, please follow the small series to learn together!

As we write pages, the main task we do is to improve page performance and elastic loading speed, loading CSS in a way that does not delay page rendering. This is because by default,

- Browsers load external CSS synchronously

- When downloading and parsing CSS affects all page rendering

Both situations result in potential delays.

Of course, this is also before you start rendering the page, you should load at least part of the site's CSS, and in order to add this initial CSS to the browser immediately, we recommend inline css. For sites with a small overall number, this alone is sufficient, but if the CSS is large (for example, larger than 15 to 20kb), it can help performance break it down by priority. After splitting, you should load less critical CSS asynchronous in background-aka. In this article, my goal is to describe my preferred approach these days, which has actually been around for a long time.

There are several ways to load CSS asynchronously, but none is as intuitive as you might expect. Unlike script elements, there are no async or defer attributes that can be simply applied to link elements, so we have maintained loadCSS projects over the years to make the process of loading asynchronous CSS easier. Recently, browsers have standardized their CSS loading behavior, so dedicated scripts like loadCSS may no longer be needed to handle their minor differences.

Today, we have some knowledge of how browsers handle various link element attributes, and we can achieve the effect of asynchronous loading CSS with a small piece of HTML. Here, it's the easiest way to load stylesheets asynchronously:

This was no different from the previous method! Yes, that's true, but the grammar is better. In addition, if you look carefully, you will find the as="style" attribute, so preload can be used not only on CSS files, but on most resource files.

We can create a script tag to point to it:

var script = document.createElement("script");

script.src = "scriptfile.js";

document.body.appendChild(script);

At this point, the browser takes the file directly from the cache and will not make any more requests because it has already been loaded.

So what resource files does the as attribute in preload support? All of the following can be done.

font

image

object

script

style

Don't think too much about it, only Google has made perfect support for it.

It can also be implemented in JavaScript:

$(window).load(function () {

//asynchronous delayed loading style

var link = $('');

link.attr('href', '/styles/index.css');

link.attr('rel', 'stylesheet');

link.appendTo($('head'));

link.load(function () {

console.info ('Loading success... ');

});

At this point, the study of "what are the methods of asynchronous loading CSS" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.