多个 javascript/css 文件:最佳实践?

2022-08-30 09:53:40

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

那么我应该包括一个CSS和一个Javascript文件,并让它们包括其余的吗?我应该将所有文件连接成一个吗?我应该把我的标签放在文档的最末尾吗?

编辑:FWIW 是的,这是 PHP。


答案 1

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

编辑: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来查看您的页面应该如何设置。


答案 2

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

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

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