Firefox 3.5+ 中的 Flash Of Unstyled Content (FOUC)

Question

我们已经走到了尽头，试图克服 Firefox 3.5.x+ 中令人讨厌和间歇性的 FOUC，以开发我们正在开发的新版本。

我们已经尝试过：

• 在 FF 中禁用 Javascript
• 通过删除 DOCTYPE 使用 Quirks 模式呈现
• 从@import 移动到<link> 以获取额外的CSS
• 打开和关闭串联
• 从 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

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

HTML 页面需要很长时间才能加载 - 也可能是因为它位于开发服务器上？ - 在 HTML 页面之后加载样式表。

我不能声称完全理解这里发生的事情，但我会尝试将样式表放到不同的域中作为首要措施。这应该会让 Firefox 立即建立连接。

返回普通图像而不是 data: URI 可能也是一个好主意 - 这会减小样式表的大小，而 data: URI 在 IE

Answer 2

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