Open chiwent opened 6 years ago
<link rel="stylesheet" href="style.css" />
补充：
类似这种方式<link rel="stylesheet" href="style.css" media="print" /> 该样式表会加载，但是在浏览器环境不匹配媒体查询条件的时候，该样式表不会阻塞渲染。我们可以针对不同的媒体环境拆分CSS文件，并为link标签添加媒体查询，避免为了加载非关键CSS资源而阻塞初次渲染
<link rel="stylesheet" href="style.css" media="print" />
形如<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, 你应该知道些什么？
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'" />
以上的内容出自：奇舞学院视频-关键渲染路径性能优化
<link rel="stylesheet" href="style.css" />补充：
什么是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, 你应该知道些什么？
以上的内容出自：奇舞学院视频-关键渲染路径性能优化