use*_*790 12 css firefox stylesheet font-face fouc
我没有在我测试的任何其他浏览器中看到这个问题 - 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出错了？这让我疯了!
Edd*_*e's 27
如果在 之后添加一个虚拟<script>标签<body>，Firefox 将在<head>加载所有 css 后显示该页面：
<body>
<script>0</script>
<!-- rest of the code -->
</body>
Firefox 站点上有关于此 FOUC（Flash Of Unstyled Content）的官方错误报告：https ://bugzilla.mozilla.org/show_bug.cgi?id=1404468
无论如何，我遇到了同样的问题，并发现这是由于<html>...</html>标签格式不正确引起的。
准确地说，在我的代码中，我不小心过早关闭了 HTML 标签，如下所示：
<!DOCTYPE html>
<html lang="en"></html>
<head>
<title>My title</title>
原始海报提供的代码缺少开头，<html>所以我怀疑这可能就是那里发生的事情。
我遇到了这个错误.一位同事说,它是由属性引起的,autofocus被添加到表单字段中.
通过删除此属性并使用JavaScript设置焦点,无格式内容的短暂闪现停止发生.
Filament Group 详细分享了他们加载字体的方式，
http://www.filamentgroup.com/lab/font-loading.html
这是 @font-face 加载的一种很好的现代方法
Smashing 杂志还审查了该网站的性能，并提出了一种不同的解决方案，将字体的 Base64 副本存储在本地存储中。此解决方案可能需要不同的字体许可证。
要点可以在以下位置找到：
https://gist.github.com/hdragomir/8f00ce2581795fd7b1b7
详细说明他们的决定的原始文章可以在以下位置找到：
文档的头部包含许多单独的样式表，所有这些 css 文件应该组合成一个文件，并进行缩小和 gzip 压缩。您可能在主样式表之前放置了第二个字体链接。
<link rel="stylesheet" href="resources/css/fonts.css" type="text/css" />
<link rel="stylesheet" href="resources/css/main.css" type="text/css" />
就我而言，FF 中 FOUC 的原因是页面上存在 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 中。
我Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.在控制台中显示时遇到了同样的问题，并且在页面刷新时出现了无样式内容的可见闪烁，没有(F5) 或清除缓存 (Ctrl + F5)。具有开发工具开放不作出了区别两种。
帮助我的是在标签结束之前在脚本中声明一个变量</head>，所以基本上是在所有<link>标签之后。
重要的是要注意，空脚本（或只有注释）或任何随机的 javaScript 都无济于事，但声明变量有效。
<head>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/other.css" />
<script>
/*to prevent Firefox FOUC, this must be here*/
let FF_FOUC_FIX;
</script>
</head>无需在 css 或 js 文件中重新排列链接或不使用导入。
请注意，该问题将不再可见（FOUC 明显消失），但控制台可能仍会显示相同的警告。