仅在Firefox中闪烁未样式化内容(FOUC)? FF慢速渲染器吗? [英] Flash of unstyled content (FOUC) in Firefox only? Is FF slow renderer?
问题描述
在我测试过的任何其他浏览器(例如IE，Chrome，Opera)中都没有看到此问题，但是每当我从服务器加载页面时，在应用CSS之前都会看到未样式化内容的闪烁
I'm not seeing this issue in any other browser that I've tested - IE, Chrome, Opera - but whenever I load a page from the server, I'm seeing a flash of unstyled content before the CSS is applied.
甚至在随后的页面加载中都会发生这种情况，所有内容都应缓存-每次页面加载时，我看到未样式化的内容一秒钟，然后一切都稳定下来.
This is even happening on subsequent page loads where everything should be cached - every time the page loads I see the unstyled content for a split-second, then everything settles in.
(值得注意的是)页面正在使用@ font-face拉一些Google字体，这也值得一提.它们存储在单独的样式表中，在主要的响应样式表和媒体查询之后被拉出.
It's also worth noting (perhaps?) that the page is using @font-face to pull some Google fonts. They are stored in a separate stylesheet being pulled after the main responsive stylesheets and media queries.
我尝试了几种不同的方法，但没有效果:
I've tried a few different things, to no effect:
- CSS样式表链接的重新排列顺序
- 使用@ font-face删除指向样式表的链接
- 禁用Firebug? (在这里阅读……)
值得一提的另一件事是，我在页面的CSS中使用了很多Element Type CSS选择器.可能会减慢渲染过程吗?
One other thing that may be worth mentioning is that I used quite a lot of Element Type CSS selectors in the page's CSS. Is it possible that this is slowing down the rendering process?
这似乎不太可能，因为更改窗口尺寸后立即重新呈现页面没有问题-响应式内容可以立即呈现.
This seems unlikely as there is no problem immediately re-rendering the page upon changing the dimensions of the window - the responsive stuff renders fine immediately.
因此，这使我相信CSS的加载方式存在一些问题.
So this leads me to believe that there is some issue with how the CSS is being loaded.
这是我的HEAD代码:
Here is my HEAD code:
<!DOCTYPE html>
<head>
<!--<meta name="robots" content="noindex" />-->
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
<title></title>
<!-- responsive stylesheets -->
<link rel="stylesheet" href="resources/css/320.css" type="text/css" media="screen and (max-width:320px)" />
<link rel="stylesheet" href="resources/css/480.css" type="text/css" media="screen and (min-width:321px) and (max-width:480px)" />
<link rel="stylesheet" href="resources/css/768.css" type="text/css" media="screen and (min-width:481px) and (max-width:768px)" />
<link rel="stylesheet" href="resources/css/960.css" type="text/css" media="screen and (min-width:769px) and (max-width:960px)" />
<link rel="stylesheet" href="resources/css/960+.css" type="text/css" media="screen and (min-width:961px)" />
<!-- custom fonts stylesheet -->
<link rel="stylesheet" href="resources/css/fonts.css" type="text/css" />
<!-- favicon -->
<link rel="shortcut icon" href="resources/images/ui/favicon.ico">
<!--[if lt IE 9]>
<link rel="stylesheet" href="resources/css/960+.css" type="text/css"/>
<![endif]-->
</head>
WTF在Firefox中出问题了?真让我发疯！
WTF is going wrong with Firefox? It's driving me nuts!
推荐答案
如果在<body>之后添加虚拟<script>标记，则Firefox将在加载<head>中的所有css之后显示页面:
If you add a dummy <script> tag right after <body>, Firefox will show the page after all the css from <head> is loaded:
<body>
<script>0</script>
<!-- rest of the code -->
</body>
在Firefox网站上有关于此FOUC(未样式化内容的Flash)的官方错误报告: https://bugzilla.mozilla.org/show_bug.cgi?id=1404468
There is an official bugreport about this FOUC (Flash Of Unstyled Content) on the Firefox site: https://bugzilla.mozilla.org/show_bug.cgi?id=1404468
这篇关于仅在Firefox中闪烁未样式化内容(FOUC)? FF慢速渲染器吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
