我已经制作了我网站的移动版本。然而，当加载页面时，首先显示该站点而不应用CSS，并且在一秒钟之后（最多）它应用CSS并正确地呈现它。这种行为在所有浏览器（包括移动浏览器）中都是一致的。
你有什么想法，我怎么能强制浏览器首先加载CSS（其尺寸非常小）然后呈现内容？我已经看到了一些关于在head之外包含CSS文件的东西，但据我所知这是违反规范的，我担心这样的黑客可能会在某些移动浏览器上制造东西。
谢谢！
这是源头
<?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>
我相信我找到了一个更好的方法来处理这个...
在输出文件的顶部放置以下内容：
<head><div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div></head>
然后在上次加载的CSS文件的最后一行放置：
#loadOverlay{display: none;}
这主要是针对自身的问题。加载的第一个可显示的html在CSS加载和处理时在所有内容的顶部放置一个空白画布，加载和处理的最后一个CSS删除画布。从我的测试中，这完全解决了这个问题。
你有没有用过requirejs？你可以设置你的
requirejs.config(<confObj>);
这样的事情
require(Array[<all your CSS & JS >]);
requirejs会为你做缓存（比如）的东西！ requirejs api
浏览器从顶部到底部读取代码，因此代码在页面上越高，代码的紧凑程度将影响页面上的加载时间。你不能像使用图像或其他东西那样预先加载它，所以我真的会考虑缓存文件，它可能是最好的解决方案。对不起，没有更好的选择。但说实话，一秒加载时间并不是太糟糕。
Nathan Bunney - 启发我的好主意，但我认为更好的方法是在文档完全加载后用javascript删除叠加层。
$(document).ready( function() {
$("#loadOverlay").css("display","none");
});
您可以确保在使用这种简单的技术加载CSS之前不会显示HTML元素：
// 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将显示为完全样式。