Php 多个javascript/css文件：最佳实践？

我现在有大约7个Javascript文件（感谢各种jQuery插件）和4-5个CSS文件。我很好奇处理这些问题的最佳实践是什么，包括它们应该在文档中的何处加载？YSlow告诉我，Javascript文件应该尽可能包含在末尾。身体的末端？它提到delimeter似乎是他们是否写内容。我所有的Javascript文件都是函数和jQuery代码（都是在ready（）时完成的），所以应该没问题

那么，我应该包括一个CSS和一个Javascript文件，并让它们包括其余的吗？我应该将所有文件合并为一个文件吗？我应该把Javascript标记放在文档的末尾吗

---

编辑：FWIW是的，这是PHP。

您没有明确表示您有权访问服务器端解决方案，但假设您有权访问服务器端解决方案，我一直使用一种方法，包括使用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需求是分支的，我也会这样做。

我会这样做：我最多使用两个JavaScript文件，通常每个页面使用一个CSS文件。我找出哪些JS文件在我的所有页面中都是通用的（或者足够多，所以很接近——包含jQuery的文件将是一个很好的候选文件），然后我将它们连接起来，并使用缩小它们，然后缓存组合的文件。如果剩下的JS文件只针对某个页面，我会将它们连接、缩小并缓存到单个文件中。第一个JS文件将在多个页面上调用，第二个仅在这一个页面上调用，或者在几个页面上调用

如果你喜欢的话，你可以在CSS中使用相同的概念，尽管我发现我通常只使用一个文件来处理CSS。还有一件事，当我创建缓存文件时，我在文件的开头放了一点PHP代码，将其作为gzip文件使用，这实际上是您可以节省大部分开销的地方。您还需要设置过期标头，以便用户的浏览器也有更好的机会缓存文件。我相信您也可以通过Apache启用gzip

对于缓存，我检查文件创建时间是否比我设置的时间长。如果是，我将重新创建缓存文件并提供服务，否则我将只获取现有的缓存文件。

我建议使用，它允许您为一组JS或CSS文件创建单个HTTP请求。Minify还处理客户端缓存的gzip、压缩和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>

---

编辑：您还可以使用查看页面的设置方式。

缩小和合并文件的想法非常好

我在我的网站上做了类似的事情，但为了便于开发，我建议使用如下代码：

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>"
}

if（环境==生产）{
echo“@import（/Styles/Combined.css）；”
}否则{
echo“@import（/Styles/File1.css）；”
echo“@import（/Styles/File2.css）；”
}

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

---

根据YUI的建议，一定要考虑将js放在底部，将css放在顶部，因为将js放低会对页面其余部分的外观产生明显的影响，而且感觉会快得多。

我不建议使用基于javascript的解决方案（如PHP Minify）如果访问者禁用了javascript，那么在页面中添加css将变得不可用。

我也倾向于将所有jquery插件复制并粘贴到一个文件中：jquery.plugins.js，然后链接到

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

---

对于实际的jquery库。

这类事情不妨碍缓存吗？如果缓存在远程包含时出现问题，大多数浏览器都会重新考虑是否只向URL传递时间戳…但是。。。使用缓存头应该仍然是首选方法。不知道那篇文章中的语法是否与php类似。这只是随机的伪代码：）以结束“echo”行；对于php版本，在“环境”和“生产”之前添加“$”。）今天早些时候，我尝试了这个方法，但遇到了几个问题：首先，我的ready（）样式后来出现了（在应用时，它实际上非常明显），我无法将jquery调用直接嵌入到我的代码中（因为jquery.js还没有加载），还有一些奇怪的缓存问题。你不必将JavaScript文件放在底部，如果您只有一个。这是正确的，因为JS文件位于底部，并且在您的其余代码已经加载并运行之后。如果你仍然想提高你的YSlow分数，你可能需要重新编码你的网站来改变这一点。就我个人而言，我没有遇到任何重大问题，包括在代码中使用jQuery