阻塞渲染的CSS

概述

• 默认情况下，CSS 被视为阻塞渲染的资源。如果没有CSS，浏览器将阻塞渲染，直至 DOM 和 CSSOM 全都准备就绪
• 我们可以通过媒体类型和媒体查询将一些 CSS 资源标记为不阻塞渲染
• 浏览器会下载所有 CSS 资源，无论阻塞还是不阻塞

CSS媒体类型和媒体查询

• CSS 是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端，以便缩短首次渲染的时间
• 如果有一些资源只在特定条件下使用，使用媒体查询可以不阻塞渲染。只在特定条件下才会下载资源，阻塞渲染

  <link href="style.css" rel="stylesheet">
  <link href="print.css" rel="stylesheet" media="print">
  <link href="other.css" rel="stylesheet" media="(min-width: 40em)">
  

• 媒体查询由媒体类型以及零个或多个检查特定媒体特征状况的表达式组成。例如，上面的第一个样式表声明未提供任何媒体类型或查询，因此它适用于所有情况，也就是说，它始终会阻塞渲染。第二个样式表则不然，它只在打印内容时适用—或许您想重新安排布局、更改字体等等，因此在网页首次加载时，该样式表不需要阻塞渲染。最后，最后一个样式表声明提供由浏览器执行的“媒体查询”: 符合条件时，浏览器将阻塞渲染，直至样式表下载并处理完毕