加载外部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 文件放在适当的位置，以便在进行任何 DOM 操作之前，最有可能最大限度地减少页面加载时的可见更改，但最终并不重要。