FOUC (Flash of Unstyled Content) 指的是网页在加载过程中，浏览器先渲染未经样式化的HTML内容，然后才加载CSS样式，导致用户短暂地看到页面元素的原始样式，然后页面突然“跳”到正确的样式。这会造成不佳的用户体验。
避免FOUC的关键在于确保CSS样式在HTML内容渲染之前或与之同时加载和应用。以下是一些避免FOUC的常用方法：
- 使用
<link>标签并在<head>中尽早引入CSS： 这是最推荐和最常用的方法。将CSS放在<head>中可以确保浏览器在解析HTML body之前就下载并解析CSS。
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="style.css"> </head>
<body>
<h1>Hello World!</h1>
</body>
</html>
-
使用
@import指令 (不推荐): 虽然@import也可以引入CSS，但它会阻塞页面渲染，直到CSS文件下载完成，这可能会导致页面加载速度变慢，甚至在某些情况下反而更容易出现FOUC。因此，通常不推荐使用@import。 -
使用
<style>标签并在<head>中嵌入CSS： 将CSS直接嵌入到HTML文档中可以避免额外的HTTP请求，从而加快页面加载速度。对于少量CSS代码，这是一种有效的方法。
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
h1 { color: blue; }
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
- 隐藏HTML元素直到CSS加载完成： 可以使用JavaScript或一些CSS技巧在CSS加载完成之前隐藏页面内容。例如，可以使用
onload事件或DOMContentLoaded事件来触发显示内容的JavaScript代码。或者，可以使用以下CSS技巧：
<head>
<style>
body { display: none; } /* 隐藏body */
body.loaded { display: block; } /* CSS加载完成后显示body */
</style>
<link rel="stylesheet" href="style.css" onl oad="document.body.classList.add('loaded')">
</head>
-
服务器端渲染 (SSR): 对于使用服务器端渲染的框架（如Next.js, Nuxt.js等），CSS样式通常会在HTML渲染过程中被嵌入，从而避免FOUC。
-
优化CSS文件大小和加载速度： 较小的CSS文件可以更快地下载和解析，从而减少FOUC出现的可能性。可以使用压缩工具来减小CSS文件的大小。
总结：最佳实践是将<link>标签放在<head>中，并尽可能优化CSS文件大小和加载速度。避免使用@import，并根据项目需求选择嵌入式CSS或外部CSS文件。 如果使用JavaScript框架，则框架本身通常会处理FOUC问题。
通过以上方法，可以有效地避免FOUC，提升用户体验，让页面加载更加流畅。
标签：body,FOUC,如何,避免,HTML,页面,CSS,加载 From： https://www.cnblogs.com/ai888/p/18560405