首页 > 试题广场 >

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

[问答题]

风烟

导入的话会等文档加载完之后再加载css样式文件，而link是顺序加载，这样页面就会等css下载完之后再下载html文件，这样就先布好了局，所以就不会出现focus闪烁问题

发表于 2016-05-15 22:23:53 回复(0)

前端略懂

<p>加载页面的时候，link是同时加载的。@import是页面加载完才加载CSS的，这一段时间是没有CSS样式的</p><p><br></p>

发表于 2021-04-14 23:18:13 回复(0)

伯爵213

<p>不要用import</p><p><br></p>

发表于 2020-09-11 16:53:24 回复(0)

努力赚钱的小曾

<p>头部引入link，link是顺序加载，import是等待下载</p>

发表于 2020-08-29 16:21:42 回复(0)

太阳煮的酒

把@import换成link即可

发表于 2019-06-07 11:03:49 回复(0)

1:电话号

现在还有@import么

发表于 2019-03-27 08:27:52 回复(0)

箫声远

应该是把@import换成link引入吧，script是干嘛

发表于 2016-03-15 10:57:15 回复(1)

abao呢

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

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

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

发表于 2015-07-27 14:30:53 回复(4)

提交观点

问题信息

Javascript HTML

上传者：abao呢

难度：

8条回答 388收藏 15615浏览

扫一扫，把题目装进口袋