加载外部CSS和JavaScript文件的顺序

Question

我有一个加载许多 css和javascript文件的第三方应用程序，我现在想通过将所有javascripts合并到一个文件中来优化它，由yuicompressor压缩，但是...当我们有一个混合时：

<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="script2.js"></script>
<link rel="stylesheet" href="style1.css" type="text/css" />
<script type="text/javascript" src="script3.js"></script>
<script type="text/javascript" src="script4.js"></script>

这里中间有一个css是否重要？ 我应该整理和yuic压缩4个javascripts并在CSS之前或之后加载它们吗？

Answer 1

查看雅虎加速网站的最佳实践 ，他们建议首先加载你的css（最好是在标题中），然后你的js加载（在正文中的所有内容之后）。 Google的最佳做法还建议首先加载CSS。

Answer 2

这取决于。 如果所有JS只能在DOM上运行，那么顺序就不重要了。 但是，如果有任何内联javascript更改DOM元素的CSS样式，那么您将遇到问题。

更实际的是，您可能应该首先使用CSS，以便用户需要更少的时间体验无格式内容。

Answer 3

这没关系，虽然如果加载需要一段时间，用户可能会看到他的页面改变外观并想知道为什么。 在任何DOM操作之前，我首先将CSS文件放在样式定义中，最有可能在页面加载时最小化可见变化，但最终并不重要。