Question

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

我将概述我的网页布局

<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 ......

有什么想法吗？

Answer 1

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

Answer 2

您可以尝试注释掉不同的脚本标记，以缩小哪些脚本可能导致无格式内容的闪现。

还要考虑jquery-ui-1.8.5.custom.css之前应该指定defaultCssDropdown.css，Style.css等等，以便它可以作为基础，其他样式表可以覆盖类和ID。

修复无格式内容的闪存（FOUC）

2 个答案: