什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

最新推荐文章于 2024-06-18 21:46:41 发布

xujie_0311

最新推荐文章于 2024-06-18 21:46:41 发布

阅读量3.5k

点赞数

分类专栏：常见问题

常见问题专栏收录该内容

13 篇文章

订阅专栏

本文探讨了FOUC（Flash Of Unstyled Content）问题的原因及其解决办法。主要原因是使用@import方法导入CSS导致页面加载过程中出现样式闪烁。解决方案为避免使用@import方法并确保样式表链接位于head标签内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

FOUC - Flash Of Unstyled Content 文档样式闪烁

原因有：

1、使用@import方法导入CSS时，例如： <style type="text/css" media="all">@import "../fouc.css";</style>此方式由于IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
2、将样式表链接放在页面不同位置时，在IE5/6下某些页面会无样式显示内容且瞬间闪烁，这现象就是文档样式短暂失效（Flash Of Unstyled Content），即FOUC。
解决方法：避免使用@import方法导入CSS，且将样式表链接都放在head中即可避免此问题。