web front-end entry to the combat: asynchronous loading CSS easiest way to achieve

We think 提高one of the most influential measures the performance of web pages, is loading so as not to delay the rendering of web pages CSS.

By default, the browser loads CSSwhen the termination style page rendering (synchronous load), which is loaded CSSwill block DOM树rendering (but do not block DOM树construction), can be simply understood as: When loading CSSthe same time, but also in the building DOM树, but did not apply the style.

Rendering Process

Simply go over the browser rendering process:

1. Load HTMLResources
2. ResolveHTML
3. Load CSSresources, while buildingDOM树
4. Parsing CSS, and renderingDOM树

When CSS文件too large, it will stay in 第3步, so when Suman, open a Web site often encountered when no style case.

So we need to be loaded first part CSS( 首屏the need to use CSS), other lower priority CSSto asynchronously load. And scriptelements of different, no asyncor deferattribute may be simply applied to linkthe elements, but can be simulated.

Asynchronous loading

1. Using media queries

Set the value of a current browser does not support:

<link rel="stylesheet" href="./index.css" media="none" onload="this.media='all'">

Such asynchronous browser will load the CSSfile (low priority), after loading is complete, use the onloadproperty linkof the media type is set all, then began to render.

If there is the following code:

<link rel="stylesheet" href="./index2.css" media="none" onload="this.media='all'">
<link rel="stylesheet" href="./index1.css">
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

The browser loads the priority is as follows:

Or there is the following code:

<link rel="stylesheet" href="./index1.css" media="screen and (max-width: 800px)">
<link rel="stylesheet" href="./index2.css" media="screen and (min-width: 800px)">

When refresh the page, if the 视窗width is less than 800px, the priority load index1.css, it is greater than if 800px, on the contrary:

Summary: Media query does not match the style of low priority?.

2. Load resources in advance

This is similar with the above, but the priorities are 最高, but still loaded asynchronously without blocking the DOM rendering, but browser support is relatively low?.

<link rel="preload" href="./index.css" as="style">

Tells the browser "请提前加载好此资源，我后面会用到！". When used, the browser cache begins to pick up?.

Therefore, the correct operation with media queries as:

<link rel="preload" href="./index.css" as="style" onload="this.rel='stylesheet'">

Of course, the property can also be applied to other resources when you need to use these resources, the browser will direct from 缓存the take, not again send a request.

<link rel="preload" href="./index.js" as="script">
<link rel="preload" href="./index.png" as="image">
<link rel="preload" href="./index.mp4" as="video" type="video/mp4">

3. Aberdeen fishing wording

let link = document.createElement("link");
link.rel = "stylesheet";
link.href = "./index1.css";

document.head.appendChild(link);
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

to sum up

Important style uses synchronous load (conventional writing), low priority using asynchronous loading, asynchronous loading will not block page rendering.

More and more people are discovering, may only need a simple HTMLmethod, while simple is often the best.

<link rel="stylesheet" href="./main.css">
<link rel="stylesheet" href="./other.css" media="none" onload="this.media='all'">