我现在有大约 7 个 Javascript 文件（感谢各种 jQuery 插件）和 4-5 个 CSS 文件。我很好奇处理这些问题的最佳做法是什么，包括它们应该在文档中的哪个位置加载？ YSlow 告诉我 Javascript 文件应该——在可能的情况下——包含在最后。身体的尽头？它提到分隔符似乎是他们是否编写内容。我所有的 Javascript 文件都是函数和 jQuery 代码（都在 ready() 时完成）所以应该没问题。
那么我是否应该包含一个 CSS 和一个 Javascript 文件并让它们包含其余部分？我应该将所有文件连接成一个吗？我应该把 Javascript 我的标签放在文档的最后吗？
编辑： FWIW 是的，这是 PHP。
【问题讨论】：
标签： php javascript jquery html css
我建议使用PHP Minify，它允许您为一组 JS 或 CSS 文件创建单个 HTTP 请求。 Minify 还为客户端缓存处理 GZipping、压缩和 HTTP 标头。
编辑：Minify 还允许您设置请求，以便为不同的页面包含不同的文件。例如，一组核心 JS 文件以及某些页面上的自定义 JS 代码或其他页面上的核心 JS 文件。
在开发过程中，像往常一样包含所有文件，然后当您接近切换到生产运行时，缩小并将所有 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 来查看您的页面应该如何设置。
【讨论】：
我也倾向于将我所有的 jquery 插件复制+粘贴到一个文件中：jquery.plugins.js 然后链接到
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
对于实际的 jquery 库。
【讨论】：
我不建议使用基于 javascript 的解决方案（如 PHP Minify）来包含您的 CSS，因为如果访问者禁用了 javascript，您的页面将变得无法使用。
【讨论】：
压缩和合并文件的想法很棒。
我在我的网站上做了类似的事情，但为了简化开发，我建议使用如下代码：
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 较低会对页面其余部分的外观产生切实的影响并且感觉更快。
【讨论】：
我的工作是：我最多使用两个 JavaScript 文件，通常每个页面使用一个 CSS 文件。我弄清楚哪些 JS 文件在我的所有页面中都是通用的（或者足够多的，所以它很接近 - 包含 jQuery 的文件将是一个很好的候选者），然后我将它们连接起来并使用 jsmin-php 缩小它们，然后我缓存合并文件。如果剩下的任何 JS 文件仅特定于该一页，我也会将它们连接、缩小和缓存到单个文件中。第一个 JS 文件将在多个页面上调用，第二个仅在那个页面上或可能几个页面上调用。
如果你喜欢css-min，你可以在 CSS 中使用相同的概念，尽管我发现我通常只使用一个文件作为 CSS。额外的一件事是，当我创建缓存文件时，我在文件的开头放入了一些 PHP 代码，以将其作为 GZipped 文件提供，这实际上是您节省大部分费用的地方。您还需要设置过期标头，以便用户的浏览器也有更好的机会缓存文件。我相信您也可以通过 Apache 启用 GZipping。
对于缓存，我检查文件创建时间是否早于我设置的时间量。如果是，我重新创建缓存文件并提供它，否则我只获取现有的缓存文件。
【讨论】：
您没有明确表示您可以访问服务器端解决方案，但假设您这样做了，我总是采用一种涉及使用 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');
}
?>
有了上面的 sn-p，我就可以像往常一样调用文件了：
<script type="text/javascript" src="jquery.js.php"></script>
然后，如果我知道我将需要的确切功能，我只需将我的要求作为查询字符串传递 (jquery.js.php?r=core,effects）。如果它们曾经是分支的，我对我的 CSS 要求执行完全相同的操作。
【讨论】：