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

时间:2010-11-16 20:30:04

标签: javascript css yui

我有第三方应用程序加载许多 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是否重要?我应该整理和解压缩4个javascripts并在CSS之前或之后加载它们吗?

3 个答案:

答案 0 :(得分:11)

签出Yahoo's Best Practices for Speeding Up Your Web Site,他们建议先加载你的css(最好是在标题中),然后你的js加载(在正文中的所有内容之后)。 Google's best practices还建议先加载CSS。

答案 1 :(得分:7)

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

更实际的是,你应该把CSS放在第一位,这样就可以减少用户需要体验无格式内容的时间。

答案 2 :(得分:0)

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

相关问题