Firefox 3.5+中的无格式内容Flash（FOUC）

Question

我们已经到了我们的系绳的终点，试图在Firefox 3.5.x +中克服一个令人讨厌和间歇性的FOUC，用于我们正在开发的新版本。

我们尝试过：

• 在FF中禁用Javascript
• 删除DOCTYPE
使用Quirks模式渲染
• 从@import转移到其他CSS <link>
• 打开和关闭连接
• 从concat中删除CSS文件，一次一个
• 在Firefox中关闭本地缓存
• 等

我们以前的版本从未展示任何FOUC问题，因此我们已经对此版本做了些什么。到目前为止我们所做的改变包括：

• 在所有装饰图像的数据URI上使用Base64编码图像，通过CSS提供。
• 将与“框架”相关的CSS文件与特定于页面的CSS分开，并将它们捆绑为两个单独的CSS文件

要重新创建问题...请使用Firefox 3.5.x或3.6.x，然后：

1. 前往：http://my.publisher-subdomain.env.yola.net/
2. 使用用户名登录：'stack@yola.com'和密码：'stackoverflow'
3. 登录后，您应该在http://my.publisher-subdomain.env.yola.net/sites/
4. 点击主导航中的帐户链接。
5. 应加载帐户页面，您应该看到FOUC。如果未发生FOUC，请清除缓存并重新加载页面。

非常感谢您的帮助！ ：）

更新

开发环境仍在展示FOUC，但前提是FireFox内存不足或安装了大量扩展。延迟和渲染速度肯定会影响此FOUC的可见性。

Answer 1

虽然这是一个非常古老的问题，但我在寻找同一问题的解决方案时找到了它。所以，我想发布解决方案以供将来参考。我只需要将我的CSS文件的引用移到需要在我的标题中的外部Javascript的引用之上。

Answer 2

我可能错了，但这可能是并发连接问题。根据我的Firebug的“网络”标签

HTML页面只需要花费大量时间来加载 - 也许是因为它位于开发服务器上？ - 并在HTML页面后加载样式表。

我不能完全理解这里发生了什么，但我会尝试将样式表放在不同的域上作为第一个措施。这应该会让Firefox立即建立连接。

回到普通图像而不是数据可能也是一个好主意：URIs - 这将减少样式表的大小，而数据：URI在IE中根本不起作用＆lt; 8.