什么是 FOUC? 如何避免

FOUC是"Flash of Unstyled Content"的缩写，指的是在网页加载过程中，浏览器在样式表加载前会先显示未经样式修饰的内容。这会导致页面在加载时出现不良的视觉效果，内容闪烁或错位。

FOUC通常出现的原因是浏览器在加载HTML文档时，会首先加载HTML和文本内容，然后才加载CSS样式表。这导致在CSS样式表加载之前，页面的内容没有样式，呈现为未经修饰的状态。FOUC通常在以下情况下出现：

1. 外部样式表加载较慢： 如果外部CSS文件较大或加载速度较慢，将导致FOUC。

2. JavaScript操作DOM： 如果JavaScript在DOM加载之前操作文档内容，可能会导致FOUC。

3. 使用自定义字体： 如果使用自定义字体，而字体文件加载较慢，也可能引发FOUC。

为避免FOUC，可以采取以下措施：

1. 内联样式： 使用内联CSS样式或内嵌CSS块来定义关键样式，这样在外部样式表加载之前，页面的关键部分会有一些样式。

2. 预加载CSS： 使用<link>标签的preload属性，将CSS样式表提前加载，以提高加载速度。

   <link rel="preload" as="style" href="your-styles.css"> <link rel="stylesheet" href="your-styles.css" media="print" onload="this.media='all'">

3. 使用字体加载器： 如果使用自定义字体，请使用字体加载器（如font-display: swap）来定义字体加载行为，以避免文字FOUC。

   @font-face { font-family: 'YourFont'; src: url('your-font.woff2') format('woff2'); font-display: swap; }

4. 将脚本放在底部： 将JavaScript脚本放在</body>标签之前，以确保它不会操作DOM，直到页面内容加载完成。

5. 使用CSS隐藏内容： 使用CSS visibility: hidden或display: none来隐藏内容，直到样式加载完成后再显示它们。

6. 优化样式表： 确保CSS样式表是经过精简和优化的，减少加载时间。

通过这些方法，可以降低FOUC的风险，提供更好的用户体验，确保页面加载时内容具有一致的样式。