CSS | 如何来避免 FOUC(无样式内容闪烁)现象的发生?

news2024/9/24 20:55:40

一、什么是 FOUC(无样式内容闪烁)?

‌FOUC（Flash of Unstyled Content）是指网页在加载过程中，由于CSS样式加载延迟或加载顺序不当，导致页面出现闪烁或呈现出未样式化的内容的现象。‌

这种现象通常发生在HTML文档已经加载，但CSS样式表尚未加载或加载顺序不正确时，导致页面内容在没有应用样式的情况下短暂显示，随后样式表加载完成，页面内容才呈现出最终的样式效果。这种闪烁现象不仅影响用户体验，还可能对网站的整体形象和品牌形象造成负面影响。

FOUC 的原因是由于浏览器在渲染页面时，会先加载 HTML 文件，然后再加载 CSS 文件。如果 CSS 文件加载时间过长或者放置位置不当，浏览器就会先加载 HTML 文件并显示页面内容，而没有样式的 CSS 文件则会在加载完成后才被应用于页面，从而导致页面出现无样式的内容闪烁现象。

示例： ‌FOUC - FlashOf Unstyled Content 文档样式闪烁现象的产生

<style media="all">
  @import"../fouc.css";
</style>

而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。

解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script>元素就可以了。

下面我们就来总结一下，都有哪些方法可以避免 FOUC现象的发生？

二、如何来避免 FOUC现象的发生？

为了避免FOUC现象，可以采取以下几种方法：

‌‌‌使用内联CSS或内部样式：使用内联CSS或在<head>中使用内部样式——内嵌样式表：将CSS样式放在<head>中‌：将CSS链接或样式块放在HTML文档的<head>部分，确保浏览器在渲染页面内容之前首先加载和应用样式。这样做可以确保页面在显示之前已经应用了所需的样式，避免了无样式内容的短暂显示。‌‌‌总之，使用内联CSS或内部样式都可以确保样式立即可用于渲染页面内容，避免FOUC现象的发生。
‌预加载样式表：使用<link>标签的preload属性——在<link>标签中使用preload属性，可以确保浏览器尽早加载CSS文件。这有助于减少FOUC现象的发生，因为样式表可以在页面内容渲染之前被加载。
‌优化样式表的加载顺序和位置：通过合理规划样式表的加载顺序和位置，可以避免因样式表加载延迟而导致的FOUC现象。例如，将样式表放在<head>中，或者使用媒体查询（media queries）来控制样式表的加载条件。
使用样式回退：在CSS样式加载之前，可以使用基本的HTML样式来避免FOUC，确保页面在加载完成前依然有可用的样式。
合理使用Web 字体：Web 字体加载也可能导致 FOUC，可将字体文件嵌入到CSS中，也可以使用 font-display: swap 或其他字体加载策略，确保在字体加载期间使用后备字体（如系统字体），避免内容无样式闪烁。
避免使用 JavaScript 动态加载样式表：尽量避免通过 JavaScript 动态加载 CSS 文件。如果必须使用，可以确保在 DOM 加载之前完成样式表的加载。
避免使用阻塞CSS加载的脚本：确保JavaScript脚本不会阻塞CSS样式的加载，可以使用async或defer属性来异步加载脚本。
服务器端渲染（SSR）和样式提取：对于使用 React、Vue 等框架的应用，使用服务器端渲染（SSR）和样式提取工具（如 styled-components 的 ServerStyleSheet）可以确保样式在服务器端渲染时已经被注入到 HTML 中。
使用样式表链接的 media 属性：在 <link> 标签中添加 media 属性，指定样式表适用的媒体类型，例如 screen、print 或者 all 等，可以避免不必要的样式表加载，从而提高页面的性能和速度。