Question

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

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

编辑： FWIW是的，这是PHP。

Answer 1

我建议使用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查看您的网页应如何设置。

Answer 2

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

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

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

Answer 3

您没有明确表示您可以访问服务器端解决方案，但假设您这样做，我总是使用一种方法，使用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要求完全相同。

Answer 4

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

Answer 5

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

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

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低对页面其余部分的外观有明显的影响，感觉更快。

Answer 6

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

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

用于实际的jquery库。

多个javascript / css文件：最佳做法？

6 个答案: