CSS阻塞指的是浏览器在渲染页面时，为了避免出现内容闪现（Flash of Unstyled Content，简称FOUC），会等待CSS文件下载和解析完成后，才会渲染页面内容。这会导致页面在CSS加载完成之前呈现空白或无样式状态。
出现CSS阻塞主要有以下几种情况：
-
外部样式表: 当使用
<link>标签引入外部CSS文件时，浏览器会先下载并解析CSS文件，然后再渲染页面。如果CSS文件较大或网络较慢，就会导致明显的阻塞。尤其当CSS文件放在<head>标签中，阻塞会更加明显，因为浏览器需要先解析完CSS才能渲染页面后续内容。 -
内联样式:
<style>标签内的CSS样式也会阻塞渲染。虽然内联样式比外部样式表加载更快，但如果样式表过大或过于复杂，仍然会造成阻塞。 -
@import规则: 使用
@import规则导入CSS文件也会阻塞渲染。@import规则会先下载并解析当前的CSS文件，然后再下载并解析@import导入的CSS文件，这会导致更长的阻塞时间，因此不推荐使用@import。
总而言之，任何需要下载和解析的CSS都会阻塞渲染。为了减少CSS阻塞对页面加载速度的影响，可以采取以下优化策略：
-
CSS优化: 压缩CSS文件大小，减少不必要的样式规则，合并多个CSS文件。
-
关键CSS: 将首屏渲染所需的CSS内联到
<head>标签中的<style>标签内，从而优先渲染首屏内容，避免用户长时间看到空白页面。其余的CSS可以使用异步加载的方式加载。 -
异步加载CSS: 使用JavaScript异步加载CSS文件，例如：
const link = document.createElement('link'); link.href = 'style.css'; link.rel = 'stylesheet'; document.head.appendChild(link);或者使用
media属性：<link rel="stylesheet" href="print.css" media="print"> <link rel="stylesheet" href="style.css" media="all">浏览器只会下载
media属性匹配当前媒体类型的CSS文件。例如，print.css只会在打印页面时下载。初始加载时，media="all"的样式表会阻塞渲染，而其他媒体类型的样式表将异步加载。 利用media属性，可以先加载关键CSS，再异步加载其他CSS。例如，先用media="screen"加载首屏样式，然后用media="all"加载完整样式。 -
使用CSS预加载: 使用
<link rel="preload" href="style.css" as="style">告诉浏览器尽早加载CSS文件，但不会阻塞渲染。
通过以上优化策略，可以最大程度地减少CSS阻塞，提高页面加载速度，提升用户体验。
标签：文件,渲染,阻塞,css,下会,页面,CSS,加载 From： https://www.cnblogs.com/ai888/p/18594279