如何避免无样式内容闪烁(FOUC)？

2024年1月5日 260次阅读 来源: 阿西瓜

什么是FOUC？

FOUC – Flash Of Unstyled Content 文档样式闪烁 即 文档样式短暂失效
如果使用 import 引入 css 文件会导致某些页面在IE下出现一些奇怪的现象：

以无样式显示页面内容的瞬间闪烁

形成原因

  1. 通过 @import 引入 css 样式

    <style>
    @import "../fouc.css";
</style>
  2. 样式表放在页面底部
  3. 有多个样式表，放在 html 不同位置

原理：IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。

解决方法：

在head里面加入一个link或者script标签

    原文作者：阿西瓜
    原文地址: https://segmentfault.com/a/1190000018567488
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞