引入CSS的方法比较

[chiwent]

引入CSS资源的方法	是否阻塞初次渲染
<link rel="stylesheet" href="style.css" />	是
通过document.write写入以上标签	是
通过DOM API插入HTMLLinkElemet对象	是
使用preload方式加载CSS	否
为link添加media query	否

补充：

什么是media query?

类似这种方式<link rel="stylesheet" href="style.css" media="print" />

该样式表会加载，但是在浏览器环境不匹配媒体查询条件的时候，该样式表不会阻塞渲染。我们可以针对不同的媒体环境拆分CSS文件，并为link标签添加媒体查询，避免为了加载非关键CSS资源而阻塞初次渲染

什么是preload？

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

rel不是stylesheet，因此不会阻塞渲染

preload是resource hint规范中定义的一个功能，resouce hint通过告知浏览器提前建立连接或加载资源，以提高资源加载的速度

浏览器遇到标记为preload的link时，会开始加载它，当onload事件发生时，将rel改为stylesheet，就可以使用该样式了

遇到preload兼容的情况下可以使用loadCSS

关于preload的实现思路可以参考：动态加载css方法实现和深入解析或者关于Preload, 你应该知道些什么？

以上的内容出自：奇舞学院视频-关键渲染路径性能优化