关于"异步加载CSS"的相关思考，以及最简单的实现方式

我们想 提高 网页性能的最有影响力的措施之一，就是以不延迟网页渲染的方式加载 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" onload="this.media='all'">

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

如果有如下代码：

浏览器加载优先级如下：

又或者有如下代码：

<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" onload="this.rel='stylesheet'">	

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

<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);	
	
	

总结

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

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

<link rel="stylesheet" href="./main.css">	

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

如果你喜欢

  顺手点击一下底部的 " 在看 " ，我就心满意足啦！

公众号回复"  1  "，即可获取群聊二维码！