强制浏览器在显示页面之前加载 CSS答案

【问题标题】：Force browsers to load CSS before showing the page强制浏览器在显示页面之前加载 CSS
【发布时间】：2011-05-09 12:10:41
【问题描述】：

我已经制作了我的网站的移动版本。然而，在加载页面时，该站点首先在没有应用 CSS 的情况下显示，一秒钟后（最多）它应用 CSS 并正确呈现它。这种行为在所有浏览器（包括移动浏览器）中都是一致的。

你有什么想法，我如何强制浏览器首先加载 CSS（它的大小真的很小）然后然后渲染内容？我已经看到了一些关于在head 之外包含 CSS 文件的内容，但据我所知，这违反了规范，而且我担心这种 hack 可能会在某些移动浏览器上造成问题。

谢谢！

更新

这是源代码

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Albite BOOKS mobile</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
    <meta name="description" content="Free e-books for Java Mobile phones."/>
    <meta name="keywords" content="free ebooks, free books, book reader, albite reader, albite books, java mobile"/>
    <meta name="language" content="en_GB"/>
    <meta name="classification" content="public"/>

    <link rel="shortcut icon" href="favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link href="/stylesheets/mobile.css?1289644607" media="screen" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <!-- .... -->
  </body>
</html>

【问题讨论】：

您是否使用@import 而不是<link>？
您是否考虑过缓存您的 CSS 文件？
每次页面加载时?1289644607 是否会发生变化？
@SimonJ，只有当文件内容改变时，id才会改变。

标签： html css browser

【解决方案1】：

我相信我已经找到了更好的方法来处理这个......

在输出文件的顶部放置以下内容：

<body>
  <div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div>
  ...
</body>

然后在最后加载的 CSS 文件的最后一行放置：

#loadOverlay{display: none;}

这基本上是利用问题来对付自己。加载的可显示 html 的第一位在 CSS 加载和处理时将空白画布放在所有内容之上，加载和处理的最后一位 CSS 将删除画布。根据我的测试，这完全解决了问题。

【讨论】：

这会影响 SEO 吗？
好问题，答案是我不知道，需要测试。想法：页面元素将以与其他方式相同的速度加载，但它们将对用户隐藏，但不会对搜索引擎蜘蛛隐藏。因此，从蜘蛛的角度来看，您应该获得相同的指标，除非它们正在映射用户实际看到的内容。如果是这种情况，那么它会降低搜索引擎优化。 MOZ (moz.com/learn/seo/page-speed) 上的这篇文章表明，这种做法根本不应该受到伤害，谷歌（和假设的其他人）只对第一个字节的时间进行评级。
然而，加载速度的感知是网站用户的一个重要指标。因此，如果这可以清除半秒的加载时间，那么这不是一个大问题，但如果您从一秒的负载感知转变为四秒的负载，那么这就是一个大问题。
<div id="loadOverlay" 元素不需要（我认为，应该不）在<head> 中。放入体内；它会工作得一样好。我什至在 IE7 中测试过。
@Marc.2377 这是一个旧的，但你是对的。我将更新为，谢谢！

【解决方案2】：

你用过requirejs吗？你可以在你的

之后设置

requirejs.config(<confObj>);

类似的东西

require(Array[<all your CSS & JS >]);

requirejs 会为你做缓存（喜欢）的东西！ requirejs api

【讨论】：

【解决方案3】：

您可以确保 HTML 元素在其 CSS 被加载之前不显示：

// CSS
#my-div { display:block !important; }

// HTML
<div id = "my-div" style = "display:none;">

  <p>This will be display:none until the CSS is applied!</p>

</div>

因为 div 标签有 display:none 作为内联样式，所以在应用 CSS 之后才会显示。当应用display:block !important 规则时，div 的内联样式将被覆盖，div 将显示为完全样式。

【讨论】：

【解决方案4】：

Nathan Bunney - 启发了我的好主意，但我认为更好的方法是在文档完全加载后使用 javascript 删除覆盖。

$(document).ready( function() {
  $("#loadOverlay").css("display","none");
});

【讨论】：

这更糟，因为禁用了 javascript 的用户根本看不到您的页面！
你也不需要拉 jQuery（这非常重）来做到这一点：document.addEventListener('load',function(){document.getElementById("loadOverlay").style.display="none";});
如果有人真的禁用了 javascript，他们就看不到一半的网页。我个人并不担心这些人，特别是因为我的大部分工作都是在 javascript 框架中完成的。但是，如果您愿意，可以使用叠加层中间的

【解决方案5】：

浏览器从上到下读取代码，因此代码在页面上的位置越高，代码的紧凑程度如何，都会影响页面的加载时间。您不能像使用图像或其他东西那样真正预加载它，所以我真的会考虑缓存文件，这可能是最好的解决方案。抱歉，没有更好的选择。但老实说，一秒的加载时间并不算太糟糕。

【讨论】：