Good programmers web front-end tutorial to share some of the ways asynchronous loading of CSS

　　Good programmers web front-end tutorial Share asynchronous loading some methods of CSS , when we write the page, we do the most important task is to improve the performance and flexibility loading speed of the page to page without delaying the presentation form to load the CSS. This is because in default,

　　- browser sync load external of CSS

　　- when downloading and parsing CSS affects all page rendering

Both can lead to potential delays.

　　Of course, this is before you start rendering the page, you should at least load the site of part of the CSS, and in order to immediately add to the initial CSS browser, we recommend inline CSS . For a small number of the overall site, which alone would be sufficient, but if the CSS large (eg, greater than 15 to 20kb), which can help performance by priority to break it. After the split, it should be in the background -aka load less critical in CSS asynchronous . In this article, my goal is to describe me in a preferred way these days, which is actually already exist for a long period of time.

　　There are several ways asynchronous loading CSS, but no method as intuitive as you expect. And script elements of different, no async or defer attributes can be simply applied to link elements, so over the years we have maintained loadCSS project that is loaded asynchronously CSS process easier. Recently, it has been standardized browser 's CSS load behavior, and therefore may no longer need a dedicated script like this loadCSS to deal with their minor differences .

　　Today, we learned how to deal with a variety of browsers some knowledge of the link element attributes, we can achieve results through a short asynchronous loading CSS HTML. Here, it is the easiest way asynchronous loading style sheet:

　　This line of HTML simple, but it's not very intuitive, so let's break down what happened here.

　　First, the link's media attribute set to print. "Print" is a media type, it says "rule-based print media to apply this style sheet", in other words, they are applied when a user tries to print the page. Admittedly, we want our stylesheet applies to all media (especially the screen) rather than just print, but by declaring the current environment does not match the media type, we can achieve an interesting and useful effects: the browser will load stylesheet without delay page rendering, asynchronous! This is helpful, but not what we want all of them. We also hope that after loading the actual CSS applied to screen environment. To this end, we can use the onload attribute to link media settings to finish loading all.

　　Introduced over the old recipe, let us look at a new prescription, yes, the same! In the past two years, we have been using link [rel = preload] (instead rel = stylesheet) achieved similar to the above mode (rel switching properties are not loaded media attribute). Using this method can still work, however, we need to consider several disadvantages preload use. First, the browser is still not particularly good for load support so if you want to rely on it to get cross-browser and apply a style sheet, then fill (eg a loadCSS) is necessary. More important it is that, PRELOAD get the file as early as possible, the highest priority, may give priority to other important downloads, and may actually need a higher priority than non-critical CSS.

　　Fortunately, if you happen to want to extract a high priority to provide the rel = preload (in browsers that support it), you can combine it with the above mode.

　　This is no different from the previous method ah! Yes it does, but then, even better some of the grammar. The other is that you carefully point will find as = "style" of this property, so preload not only can be used in the CSS file, but can be used in the vast majority of the resource file.

　　We can create a script tag to point to it:

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

　　script.src = "scriptfile.js";

　　document.body.appendChild(script);

　　Take browser at this time directly from the cache this file does not send the request, because the load had been good.

　　So what resource files as attributes preload in support of it? The following are

font
image
object
script
style

Do not think too much, just Google it to make too perfect support.

You can also use JavaScript to achieve:

　　$(window).load(function () {

　　 // asynchronous lazy loading pattern

　　 var link = $('<link />');

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

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

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

　　 link.load(function () {

　　 console.info ( 'loaded successfully ...');

　　 });

This content is pseudo-original articles, please indicate the source.

Good programmers web front-end tutorial to share some of the ways asynchronous loading of CSS

Guess you like