Question

我现在大约有7个JavaScript文件（感谢各种jQuery插件）和4-5个CSS文件。我很好奇这些文件的最佳实践是什么，包括它们应该在文档中的哪个位置加载？ YSlow告诉我，尽可能应该将JavaScript文件包含在末尾。是正文的末尾吗？它提到分隔符似乎是它们是否撰写内容。我的所有JavaScript文件都是功能和jQuery代码（在准备好时完成），所以应该没问题。

那么我应该包含一个CSS文件和一个Javascript文件，然后让它们包含其他内容吗？我应该把所有文件连接成一个吗？我应该在文档末尾使用JavaScript标记吗？

编辑：就这个问题而言，是的，这是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，通过css-min，但我发现我通常只使用一个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要求也像分支一样复杂，我同样会这样做。

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库。

友情链接