我们想 提高网页性能的最有影响力的措施之一，就是以不延迟网页渲染的方式加载 CSS。

在默认情况下，浏览器在加载 CSS时将终止页面的样式呈现（同步加载），也就是加载 CSS会阻塞 DOM树的渲染（但并不会阻塞 DOM树的构建），可以简单理解为：当在加载 CSS的同时，也在构建 DOM树，只是没有应用上样式。

渲染流程

简单过一遍浏览器渲染的流程：

1. 加载 HTML资源
2. 解析 HTML
3. 加载 CSS资源，同时构建 DOM树
4. 解析 CSS，同时渲染 DOM树

当 CSS文件过大，就会停留在 第3步，所以网速慢时，打开网站的时候经常遇到没有样式的情况。

所以我们需要先加载部分 CSS（ 首屏需要用到的 CSS），其他优先级比较低的 CSS就以异步的方式加载。与 script元素不同，没有 async或 defer属性可以简单地应用于 link元素，但是可以模拟。

异步加载

1. 利用媒体查询

设置一个当前浏览器不支持的值：

<link rel="stylesheet" href="./index.css" media="none" >

这样浏览器将会异步加载这个 CSS文件（优先度比较低），在加载完毕之后，使用 onload属性将 link的媒体类型设置为 all，然后便开始渲染。

如果有如下代码：

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

浏览器加载优先级如下：

又或者有如下代码：

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

刷新页面时，如果 视窗宽度小于 800px，那么优先加载 index1.css，如果大于 800px，则相反：

总结：媒体查询不匹配的样式优先级低?。

2. 提前加载资源

这个跟上述类似，但是优先级是 最高的，不过还是异步加载，不会阻塞DOM的渲染，只是浏览器支持度比较低?。

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

告诉浏览器 "请提前加载好此资源，我后面会用到！"。当用到的时候，浏览器便从缓存中拿取?。

所以正确操作跟媒体查询一样：

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

当然，该属性还可以应用于其他资源，当你需要用到这些资源的时候，浏览器会直接从 缓存中拿，不再次发送请求了。

<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. 捞仔写法

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

总结

重要样式使用同步加载（常规写法），优先级低的则使用异步加载，异步加载不会阻塞页面的渲染。

越来越多的人发现，可能只需要简单的 HTML方法，而简单往往是最好的。

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