CSS对JS的阻塞性

这个问题平时可能觉得不重要，真的遇到了直接就是线上事故！

浏览器对CSS的处理逻辑是：遇到<link rel="stylesheet" href="xxx.css">时会去异步加载，但是在加载并解析成功之前会阻塞所有JS的执行，包括DOMContentLoaded事件！这就意味着，一旦你写在比较靠前的某个CSS资源加载超时，你的JS也一直不会被执行，对于Vue/React页面来说直接就意味着白屏！

CSS原生不支持异步

CSS不像JS原生支持async设置：

原因是因为CSS在绝大部分时候都很重要，如果异步的话会出现刚开始一段乱码、突然刷的一下就变好看了，说白了就是设置异步的场景比较少，所以浏览器的设计者就没有考虑。

解决方法

一个比较优雅的变相实现方式是：

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

原理：

• 采用preload的方式去预加载，这样浏览器就不认为是普通的CSS；
• 加载完毕立即修改类型为样式；

注意as="style"不要忘了！