关于FOUC与@import

来源：互联网发布：人工智能产品编辑：程序博客网时间：2024/06/05 02:20

FOUC，即Flash of Unstyled Content(文档样式短暂消失),主要是指一种现象，某些页面会在windows下IE浏览器中出现奇怪的情况:一开始一段短暂的时间页面是没有样式的，随着页面加载样式才慢慢显现

FOUC现象可用此网站在IE下测试点击此网站测试

看看这个测试FOUC网站的源码便可知道，造成此现象的原因是使用了@import导入css

既然原因在@import身上，我也趁机复习了一下关于@import的知识，顺便还与<link>做了个对比，做了个归纳:

引用外部样式表有两种方法,@import和<link>

@import与<link>的共同点:

1.可以引用外部样式表

2.可以指定为特定的设备使用，如:@import url(test.css) screen;

不同点:

1.@import必须放在style内或单独的css文件中，并且要放在所有其他css规则前，否则无效

2.dom无法控制@import，但可以控制<link>

3.古老的IE5不支持@import，现在也应该没人用吧我也没见过

然后以前有人会使用@import导入样式规避那些古老浏览器

4.加载顺序

重点！这也是造成FOUC的原因，也是网上一直说不用@import的要点

看了网上的讨论,据我的理解大意都为:

当一个页面被加载时，<link>引用的css会同时被加载，而@import引用的css会在页面全部被加载后才被加载，所以会引起css解析延迟加长页面留白期，如果在网速慢得情况下会出现一开始页面没有样式。

关于FOUC,我看的认为最正确的描述是：

“IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的”。

既然，知道造成了FOUC的原因,那么该如何解决这个问题呢？

解决方法：在<head>中加入<link>或<script>元素。

我个人认为如果仅仅是为了解决FOUC而加入空的<script>元素或者让<link>元素引入一个空的样式表，虽然能解决问题，但总觉得有点欠妥当。

比较网上的方法，我觉得<link>引用一个打印样式的方法是比较妥当的，设置<link>的media="print"

这样也同时提升了页面的可用性

<span style="font-size:14px;">    </span><span style="font-size:18px;"> <link rel=”stylesheet” type=”text/css” media=”print” href=”print.css”</span><span style="font-size:14px;">></span>

另外还有关于@import会影响性能的讨论

前端观察有一篇文章，我觉得不错，文章链接这篇文章可看看。

如此说来，用@import的缺点还真的是不少，所以还是建议用<link>引入外部样式表比较好

以上是一些自己的思考和网上资料参考的结果，如有纰漏错误，望能指出

<span style="background-color: rgb(255, 255, 255);"></span>

0 0