多个javascript / css文件:最佳做法?

时间:2009-01-29 05:56:38

标签: php javascript jquery html css

我现在有大约7个Javascript文件(感谢各种jQuery插件)和4-5个CSS文件。我很好奇处理这些问题的最佳做法是什么,包括文档中应该加载哪些内容? YSlow告诉我,Javascript文件应该 - 如果可能 - 最后包括在内。身体的尽头?它提到了分隔符似乎是他们是否写内容。我的所有Javascript文件都是函数和jQuery代码(所有这些都在ready()时完成)所以应该没问题。

那么我应该包含一个CSS和一个Javascript文件,其余包括其他内容吗?我应该将所有文件连接成一个吗?我应该在文档的最末端放置Javascript我的标签吗?

编辑: FWIW是的,这是PHP。

6 个答案:

答案 0 :(得分:37)

我建议使用PHP Minify,它允许您为一组JS或CSS文件创建单个HTTP请求。 Minify还处理客户端缓存的GZipping,压缩和HTTP标头。

编辑:Minify还允许您设置请求,以便对于不同的页面,您可以包含不同的文件。例如,一组核心JS文件以及某些页面上的自定义JS代码或其他页面上的核心JS文件。

虽然在开发中包含了您通常所需的所有文件,然后当您接近切换到生产时,运行minify并将所有CSS和JS文件加入到单个HTTP请求中。它很容易设置和使用。

同样是的,CSS文件应设置在头部,JS文件在底部提供,因为JS文件可以写入您的页面并且可能导致大量的超时问题。

以下是您应该如何包含JS文件:

</div> <!-- Closing Footer Div -->
<script type="application/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
</body>
</html>

修改:您还可以使用Cuzillion查看您的网页应如何设置。

答案 1 :(得分:4)

以下是我的工作:我最多使用两个JavaScript文件,每个页面通常使用一个CSS文件。我弄清楚哪些JS文件在我的所有页面中都是通用的(或者它们足够接近 - 包含jQuery的文件将是一个很好的候选者)然后我连接它们并使用jsmin-php缩小它们然后我缓存组合文件。如果剩下的任何JS文件仅限于该页面,我会连接,缩小并将它们缓存到单个文件中。第一个JS文件将在多个页面上调用,第二个仅在该页面上调用,或者可能是少数几个。

如果您喜欢css-min,可以使用与CSS相同的概念,但我发现我通常只使用一个文件用于CSS。另外一件事,当我创建缓存文件时,我在文件的开头添加了一些PHP代码,将其作为GZipped文件提供,这实际上是您可以获得大部分积蓄的地方。您还需要设置过期标头,以便用户的浏览器也有更好的缓存文件的机会。我相信你也可以通过Apache启用GZipping。

对于缓存,我检查文件创建时间是否早于我设置的时间。如果是,我重新创建缓存文件并提供它,否则我只获取现有的缓存文件。

答案 2 :(得分:2)

您没有明确表示您可以访问服务器端解决方案,但假设您这样做,我总是使用一种方法,使用PHP执行以下操作:

jquery.js.php:

<?php
$jquery = ($_GET['r']) ? explode(',', $_GET['r']) : array('core', 'effects', 'browser', 'cookies', 'center', 'shuffle', 'filestyle', 'metadata');
foreach($jquery as $file)
 {
echo file_get_contents('jquery.' . $file . '.js');
 }
?>

使用上面的代码片段,然后我就像通常那样调用文件:

<script type="text/javascript" src="jquery.js.php"></script>

然后如果我知道我需要的确切功能,我只需将我的要求作为查询字符串传递( jquery.js.php?r = core,effects )。如果我们的CSS要求如此,那么我的CSS要求完全相同。

答案 3 :(得分:2)

我不建议使用基于javascript的解决方案(如PHP Minify)来包含您的CSS,因为如果访问者禁用了javascript,您的网页将无法使用。

答案 4 :(得分:0)

缩小和组合文件的想法很棒。

我在我的网站上做了类似的事情,但为了简化开发,我建议使用一些类似的代码:

if (evironment == production) {
  echo "<style>@import(/Styles/Combined.css);</style>"
} else {
  echo "<style>@import(/Styles/File1.css);</style>"
  echo "<style>@import(/Styles/File2.css);</style>"
}

这应该允许您在开发期间将文件分开以便于管理,并在部署期间使用组合文件以加快页面加载速度。这假设您能够在部署过程中组合文件和更改变量。

根据YUI建议,绝对考虑将你的js包含在底部,将css放在顶部,因为保持JS低对页面其余部分的外观有明显的影响,感觉更快。

答案 5 :(得分:0)

我还倾向于将所有jquery插件复制+粘贴到一个文件中:jquery.plugins.js然后链接到

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">

用于实际的jquery库。