修复无样式内容的 Flash (FOUC)答案

【问题标题】：Fix Flash of Unstyled Content (FOUC)修复无样式内容的 Flash (FOUC)
【发布时间】：2011-07-29 03:57:50
【问题描述】：

我已经阅读了一篇又一篇文章，告诉我使用 @import 时会发生 FOUC，并且您可以在标题中使用链接或脚本标签来解决问题。我没有用于 css 文件的 @imports，并且我尝试了链接和脚本标记解决方案。我还是有同样的问题...

我将概述我的网页布局

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>My Ttile</title>
    <link type="text/css" href="css/defaultCssDropdown.css" rel="stylesheet" />
    <link type="text/css" href="css/redmond/jquery-ui-1.8.5.custom.css" rel="stylesheet" />
    <link type="text/css" href="css/Style.css" rel="stylesheet" />      
    <style type="text/css">
        .watermark {    color: #999; } 
        input.text { width:95%;}
        h1 { font-size: 1.2em; margin: .6em 0; }
        .ui-dialog .ui-state-error { padding: .3em; }
        .validateTips { border: 1px solid transparent; padding: 0.3em; }
        .jtable .wrap{overflow:hidden}
        .jtable{ table-layout: fixed; }
        .gray{ color:#808080}
        #dialog-message-email { 
            position: relative; 
            min-height: 200px;
        }
        #dialog-message-email div { 
            position: absolute;
            top: 50px;
            bottom: 12px;
            left: 0;
            right: 12px;
            width: auto;
        }

        #ConfirmEmailText { 
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
...
html stuff here
...
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
<%--<script type="text/javascript" src="js/jquery.watermarkinput.js"></script>--%>
<script type="text/javascript" src="js/jquery.watermark.min.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput.js"></script>
<script type="text/javascript" src="js/autoresize.jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>
<script type="text/javascript">
 $(document).ready(function () {
 ...some javascript here...
</script>
</body>
</html>

就像我说的，我已经尝试将 <script type="text/javascript"> 放在我的标题标签的开头。

在初始页面加载时，我看到一个 FOUC...

有什么想法吗？

【问题讨论】：

期待不可避免的问题，我无法在 Firefox 中重现此行为...
在你的“html stuff here”中是否定义了任何附加的 CSS？例如是否存在呈现的内容，然后由包含的 CSS 样式设置样式？
我不确定我是否完全理解您的问题。如果您询问是否有内联 CSS 样式，那么是的。
我的意思是...您是否有内容，在 HTML 内容中包含额外的样式标签（或样式表的链接）？例如<style>.gray{color:#ccc;border:1px solid #333;}</style>
不，我并不是所有的样式标签都在标题中

标签： jquery html css internet-explorer-8 fouc

【解决方案1】：

您可以尝试注释掉不同的脚本标签，以缩小可能导致无样式内容闪烁的脚本。

还认为jquery-ui-1.8.5.custom.css应该在前面指定，defaultCssDropdown.css、Style.css等，这样它就可以作为基础，其他样式表可以覆盖类和id。

【讨论】：

【解决方案2】：

这似乎可能只是一般的页面速度问题。您正在加载七个不同的 javascript 文件（7 个不同的 http 请求），然后在您的 document.ready() 中调用它们（我假设）。尝试使用 google 托管的 jquery 和 jquery ui 版本（仅这些就超过 100kb 的下载量），然后合并并缩小其余的 javascript 和 css 文件。这可能不会使它完美，但它肯定是一个很好的起点。

【讨论】：

如果我使用谷歌托管的版本，它还需要下载吗？
谷歌托管版本的好处是它可能已经被缓存了，因为很多网站都在使用它。如果不是这样，至少从您的服务器下载少一次。
如果浏览器从我的网站下载它，它仍然应该缓存它。这个 FOUC 即使在刷新页面时也会出现，此时浏览器不应该重新下载 js 文件？还是ie8没有这么聪明？