我没有在我测试过的任何其他浏览器中看到这个问题 - IE，Chrome，Opera - 但每当我从服务器加载页面时，我都会在应用CSS之前看到一些没有样式的内容。
这甚至发生在后续页面加载中，其中所有内容都应该被缓存 - 每次页面加载时我都会看到非常规内容的瞬间，然后一切都安定下来。
也值得注意（也许？）该页面正在使用@ font-face来提取一些Google字体。它们存储在单独的样式表中，在主要的响应式样式表和媒体查询之后被拉出。
我尝试了一些不同的东西，没有效果：
可能值得一提的另一件事是我在页面的CSS中使用了很多Element Type CSS选择器。这是否有可能减慢渲染过程？
这似乎不太可能，因为在改变窗口的尺寸时立即重新渲染页面没有问题 - 响应的东西立即渲染得很好。
所以这让我相信CSS的加载方式存在一些问题。
这是我的HEAD代码：
<!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出错了？这让我疯了！
我遇到了这个错误。一位同事说，这是由属性autofocus添加到表单字段引起的。
通过删除此属性并使用JavaScript设置焦点，无格式内容的短暂闪现停止发生。
我有同样的问题。在我的例子中删除CSS文件中的@import规则并链接HTML中的所有CSS文件解决了它。
Filament Group分享他们详细加载字体的方式，
http://www.filamentgroup.com/lab/font-loading.html
这是一个很好的现代方法@ font-face loading
Smashing杂志还审查了网站的性能，并提出了一个不同的解决方案，将缓存存储在本地存储中的base64副本。此解决方案可能需要不同的许可证字体。
一个要点可以在：
https://gist.github.com/hdragomir/8f00ce2581795fd7b1b7
详细说明其决定的原始文章可在以下网址找到：
文档的头部包含很多单独的样式表，所有这些css文件应该合并为一个文件，缩小和gziped。您可能在主样式表之前放置了第二个字体链接。
<link rel="stylesheet" href="resources/css/fonts.css" type="text/css" />
<link rel="stylesheet" href="resources/css/main.css" type="text/css" />
在我的情况下，FOUC在FF中的原因是页面上存在iframe。如果我从标记中删除iframe，那么FOUC就会消失。
但我需要iframe来解决我自己的黑客攻击，所以我改变了这一点
<iframe name="hidden-iframe" style="display: none;position:absolute;"></iframe>
进入这个
<script>
document.addEventListener('DOMContentLoaded', ()=>{
let nBody = document.querySelector('body')
let nIframe = document.createElement('iframe');
nIframe.setAttribute('name', "hidden-iframe");
nIframe.style.display = 'none';
nIframe.style.position = 'absolute';
nBody.appendChild(nIframe);
});
</script>
为了便于阅读，我在模板中添加了这个内联JS：在我的例子中，这个代码每页运行一次。我知道这是脏黑客，所以你可以在分离的JS文件中添加这个代码。
问题出在Firefox Quantum v65中。
对于它的价值，我遇到了同样的问题，并发现它是由格式不佳的<html>...</html>标签引起的。
确切地说，在我的代码中，我不小心关闭了HTML标记，如下所示：
<!DOCTYPE html>
<html lang="en"></html>
<head>
<title>My title</title>
原始海报提供的代码缺少开放的<html>所以我怀疑那里可能发生了什么。