javascript - 将单独的 CSS 和 JS 文件包含到标题中，或者将所有代码包含在一个 CSS 和一个 JS 文件中？

Question

我正在尝试优化我的网站。我有一些插件(带 CSS 的 jquery 插件)和我自己的 javascript 代码。

现在，当我下载不同插件时，我将 CSS 放在不同的文件中。 如果我需要在实际页面上，我会生成代码来包含它。与 JS 文件相同。但是当渲染一个东西很多的复杂页面时，可以调用9个CSS文件和7、8个JS文件，每个都是HTTP请求。

我是否应该将 CSS 放入一个大文件中以减少包含的 CSS 文件的数量？但是即使当前页面不需要那么多东西，浏览器也会解释所有内容。

我想到了第三种方式:用PHP生成CSS和JS文件。然后它将始终是一个 JS 和一个 CSS 文件，并且只包含需要的东西。还是一种荒谬的方式？

你怎么说，使用哪个来减少页面加载时间？

Answer 1

最好将所有 CSS 和所有 JS 都包含在一个文件中，并使用许多缩小和压缩 CSS 和 Javascript 的在线服务来缩小它们。这将减少 http 请求的数量以及要下载的数据量。

如果你用 php 生成 CSS，那么 CSS 和 JS 应该随每个页面一起下载，生成它们需要一些时间，但如果你将它们打包在一个文件中，它会下载一次，浏览器会缓存它。

如果您的站点有许多不同的部分，并且将所有 css 打包到一个文件中会产生一个巨大的文件，那么您可以将 CSS 打包到两个或三个文件中，并在每个部分中加载相关的一个。

减少 http 请求的数量非常重要。