我正在尝试优化我的网站。我有一些插件要包含（带有 CSS 的 jquery 插件）和我自己的 javascript 代码。
现在，当我下载它们时，我将 CSS 放在不同插件的单独文件中。 如果我需要一个在实际页面上，我会生成代码来包含它。 JS文件也是如此。但是在渲染复杂的页面时，可以调用 9 个 CSS 文件和 7 个或 8 个 JS 文件，每个文件都是 HTTP 请求。
我应该将 CSS 放在一个大文件中以减少包含的 CSS 文件的数量吗？但是即使当前页面不需要这么多东西，浏览器也会解释所有内容。
我想到了第三种方法：用 PHP 生成 CSS 和 JS 文件。然后它总是一个 JS 和一个 CSS 文件，并且只包含需要的东西。还是一种荒谬的方式？
你说什么，用哪个来减少页面加载时间？
【问题讨论】：
标签： javascript jquery css performance optimization
最好将所有 CSS 包含在一个文件中，并将所有 JS 包含在一个文件中，并使用许多可以缩小和压缩 CSS 和 Javascript 的在线服务来缩小它们。这将减少 http 请求的数量以及要下载的数据量。
如果你使用 php 生成 CSS，那么 CSS 和 JS 应该随每一页一起下载，生成它们需要一些时间，但如果你将它们打包在一个文件中，它会下载一次，浏览器会缓存它。
如果您的网站有许多不同的部分，并且将所有 css 打包在一个文件中会产生一个巨大的文件，那么您可以将 CSS 打包在两个或三个文件中，并在每个部分中加载相关的一个。
减少http请求的数量很重要。
【讨论】：
我认为你的最后一个解决方案是最好的。
从 php 生成一个 js 文件和一个 css 文件，不要忘记将它们最小化/gzip :)
这是一篇关于优化的非常好的文章：http://developer.yahoo.com/performance/rules.html
【讨论】：
这在很大程度上取决于您的用户如何使用您的网页。如果大多数用户只查看一个页面，那么只向他们发送显示该页面所需的内容是有意义的（将所有内容组合成尽可能少的请求）。另一方面，如果大多数用户查看多个页面，那么发送给他们的数量超过他们需要的数量是有意义的，这样他们就已经在下一个页面视图中拥有 CSS&JS。但在这种情况下，您必须确保始终使用相同的 URI 生成相同的 CSS&JS，以便浏览器不会以不同的名称重新下载相同的内容。您还必须设置适当的 HTTP 缓存。
我通常做的是将 JS/CSS 分成两部分。每个页面都有一个“common.css”和“common.js”，其中包含每个页面需要的东西（CSS 的页眉/页脚/...样式，然后是 JS 的 jquery/common js/...）。然后每个子页面都有自己的 JS&CSS，其中包含该页面所需的内容（如果需要）。
【讨论】：
对我来说，最好的方法是在中间的某个地方 - 对于 CSS 文件，您最好将它们全部抓取，加入并压缩到一个文件中。对于 JS 代码 - 例如制作 3 个以上的文件：一个带有压缩和连接的外部库，一个带有您的常用内容，可能还有每个更大部分的下一个文件 - 但我认为不需要。也许在用户登录之前和用户登录之后分割你的 JS 代码。
记得缩小并考虑异步加载（例如LAB.js）。
哦，还有这个 php 脚本...我认为这不是一个好主意 - 最好使用/编写一些脚本，在编译（或部署，甚至手动运行）时加入并缩小你的静态，所以没有必要一遍又一遍地生成一切。
【讨论】：