代码之家 › 专栏 › 技术社区 › Pierre Arnaud

浏览器在短时间内显示没有样式的页面(视觉故障)

fouc css

2

Pierre Arnaud · 技术社区 · 15 年前

我注意到,Internet Explorer(7或8,无关紧要)很少显示我们的网页( www.epsitec.ch )没有应用css的短时间。布局显示为完全断开,所有内容从上到下按顺序显示。页面加载完成后,所有内容最终都会正确显示。

我们的网页没有使用任何花哨的脚本,只是在页面末尾为quantcast和google analytics添加了两个javascript。顺便说一下,在添加quantcast脚本之前,我们已经遇到了这个问题。css在 <head> 章节:

<head>
  <title>CrÃ©sus ComptabilitÃ©</title>
  <link rel="icon" href="/favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" href="http://www.epsitec.ch/favicon.ico" />
  <link href="../../style.css" rel="stylesheet" type="text/css" />
  ...
</head>

然后跟随静态html直到最后一个包含javascript的块:

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

由于这是一个很短的视觉故障,我不知道是什么引起的。更糟糕的是,我无法复制它,而且它只出现在很少的场合。如何进一步调查故障原因?有什么最佳实践我应该知道吗?

4 回复 | 直到 11 年前

1

4

deceze 15 年前

这叫做 FOUC ,一个未格式化内容的闪现,在这里有详细的文档和说明: http://www.bluerobot.com/web/css/fouc.asp/

2

0

Dustin Laine 15 年前

我没有这个问题,通常都和上网有关。css加载缓慢。

3

0

Razvan Caliman 15 年前

fouc与加载外部资源(如css和js文件)的顺序有关。内联脚本片段阻止下载后续资源,直到它们被解释为止。这是导致FOUC的原因之一。

对于前端性能和避免fouc的最佳实践是在 <head> 在关闭之前 </body> 标签。

这使得浏览器下载样式,呈现页面,然后应用javascript。

4

0

jaywards 11 年前

我也有同样的问题。我只是简单地改变了样式表和javascript在 layouts/application.html.erb . 所以现在首先加载样式表,然后加载javascript。

像这样:

<head>
 <title><%= full_title yield(:title) %></title>
 <%= stylesheet_link_tag    :application, media: "all" %>       
 <%= javascript_include_tag :application %>       
 <%= csrf_meta_tags %>
</head>