在手机上应用样式表之前延迟

Question

我有一个使用jQuery mobile的移动网站，并且在移动设备上加载CSS时遇到问题。在我的带有Jellybean的Nexus S上，HTML会很快加载，但CSS需要3-4秒，在此期间这就是网站的样子：

移动网站本身可以在http://axialdev.ekomobi.com

找到

CSS文件在顶部链接，但似乎仍然最后加载。包含颜色和可见样式的那个称为client-damafro.min.css。

我做事的方式有什么明显的问题吗？如何解决装载问题？

Answer 1

我知道这听起来有点反直觉，但是你可以把脚本放在css之后。

这将加载所有＆＃39;东西＆＃39;首先，然后是HTML。它将避免在应用js之前快速闪烁....

我在本地尝试将整个页面保存到我的计算机并更改它并且似乎正常工作......

干杯

罗宾

Ps：我最后忽略了整个加载脚本。我意识到了......

Answer 2

首先，我会缩小你所有的CSS

• Any recommendations for a CSS minifier?

我还会缩小你的JavaScript

• Is there a good JavaScript minifier?

我建议您查看Google Chrome开发者工具

• https://developers.google.com/speed/tools

最后一件事是我会将jQuery和jQuery Mobile javascript文件移到css文件后面。

<link rel="stylesheet" href="/css/responsive.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

由于jQM控制应用程序的外观，因此首先加载这些应用程序可能会有所帮助，因为您先加载HTML然后应用CSS

Answer 3

对我来说，似乎你把css放在等等方面是正确的。 我的建议是你得到yslow（https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh）并尝试根据其建议进行优化。或者，您可以将所有css合并到一个文件中进行制作，并使用此工具对其进行压缩http://www.cleancss.com/

另外，请参阅此帖子以获取更多指针Force browsers load CSS before showing the page

Answer 4

我会尝试将所有javascript（请求）放在代码的底部，就在结束</body>标记之前，并确保在DOM准备好（加载）时启动脚本。

另一个想法：尝试在自己的服务器上托管jquery-mobile库。