浏览器会短暂显示没有样式的页面(视觉故障)

Pie*_*aud 4 css fouc

我观察到,Internet Explorer(7 或 8,没关系)在不应用 CSS 的情况下短时间内显示我们的网页 ( www.epsitec.ch ),这种情况非常罕见。布局看起来完全被破坏了,所有内容都从上到下按顺序显示。当页面加载完成后,所有内容终于正确显示。

\n\n

我们的网页不使用任何花哨的脚本,仅在页面末尾包含两个用于 QuantCast 和 Google Analytics 的 javascript。顺便说一句,我们在添加 QuantCast 脚本之前就已经遇到了这个问题。CSS 在以下部分中链接<head>

\n\n
<head>\n  <title>Cr\xc3\xa9sus Comptabilit\xc3\xa9</title>\n  <link rel="icon" href="/favicon.ico" type="image/x-icon" />\n  <link rel="shortcut icon" href="http://www.epsitec.ch/favicon.ico" />\n  <link href="../../style.css" rel="stylesheet" type="text/css" />\n  ...\n</head>\n
Run Code Online (Sandbox Code Playgroud)\n\n

然后遵循静态 HTML 直到包含 JavaScript 的最终块:

\n\n
    ...\n    <div id="account">\n      <a class="deselect" href="/account/login">Identifiez-vous</a>\n      <script type="text/javascript">\n        _qoptions={qacct:"..."};\n      </script>\n      <script type="text/javascript" src="http://edge.quantserve.com/quant.js">\n      </script>\n      <noscript>\n        <img src="..." style="display: none;" border="0" height="1" width="1"/>\n      </noscript>\n    </div>\n    <div id="contact">\n      <a href="/support/contact">Contactez-nous</a>\n    </div>\n    <div id="ending"><!-- --></div>\n  </div>\n  <script type="text/javascript">\n    ...\n  </script>\n  <script type="text/javascript">\n    var pageTracker = _gat._getTracker("...");\n    pageTracker._initData();\n    pageTracker._trackPageview();\n  </script>\n</body>\n
Run Code Online (Sandbox Code Playgroud)\n\n

由于这是一个非常短的视觉故障,我不知道是什么引发了它。更糟糕的是,我无法重现它,而且它只在极少数情况下出现。如何进一步调查故障原因?我应该注意哪些最佳实践?

\n

dec*_*eze 5

这称为FOUC,即无样式内容的 Flash,这里有详细的记录和解释: http: //www.bluerobot.com/web/css/fouc.asp/