我应该将我的javascripts合并到一个和css文件中，以获得性能吗？

Question

YSlow报告显示

我在特定页面上有很多javascript文件，这些文件应合并为一个。 我在特定页面上有很多css文件，这些文件应合并为一个。

Q1。任何机构都可以详细说明如何将它们合并到一起？

Q2。如果我需要有条件不同版本的css/javascript（因为浏览器类型或版本），我应该分别缩小并使用该特定文件吗？但这将打破将所有文件放在一个文件中的规则。如果有任何机构以某种方式完成它，请你在这里分享。

Answer 1

每个文件请求都涉及到服务器的往返。您请求的单个文件越多，往返次数越多，页面加载速度越慢。将尽可能多的文件合并到一个文件中可以减少请求数量，从而缩短页面加载时间。

这是一个很好的经验法则，但不要太挂在它上面。如果您需要为不同目的加载不同版本，请继续执行此操作，前提是您不要将代码和CSS拆分为太多小片段

什么构成'太多'是网站和系统特定的。尝试一些组合，找到适合你的方法。每个系统都不同。

Answer 2

你无法拥有一切。

说实话，考虑到它们被缓存，这并不是什么大不了的事。

要回答你的问题，

Q1. Could any body elaborate on this how would it be fast to merge them in one?

它将生成一个请求而不是几个请求，从而使第一页加载更快。

Q2. In cases where I need conditionally different version of css/javascript (because of browser type or version) should I minify and use that particular file separately? but that will break the rule of putting all files in a single one. If any body has done it in a way could you please share it here.

做到这一点。你必须。

Answer 3

对于那个案例我在我的PHP框架中构建一个压缩器来处理请求。 Css或JS。我只需要包含每个文件，它根据HTTP标头进行组合和缓存。

Answer 4

在JavaScript部分

恕我直言，你不能把所有这些结合起来并尽量减少因为它总是不能给你最佳的表现。诀窍是分组和最小化您拥有的JavaScript文件。例如，您可以在页面中加载这些js文件

1. 一个（或多个）JavaScript库（
）
2. 通过AJAX将内容提取到您的网页的一些JavaScript文件
3. 使您的网站看起来很酷的插件/花式动画/独角兽
4. 一些执行分析/广告的js文件

如果将所有这些最小化为一个庞大的JavaScript文件，则不会看到性能有任何改进。相反，这将是一个可怕的经历。

相反，如果按以下顺序加载它们，它将提供更好的用户体验。

1. 从CDN加载JavaScript库（如果您使用的是没有CDN的库，那么就会出现问题）
2. 合并提供有用内容并随后加载它们的文件
3. 合并使您的网站更加性感的文件
4. 最后加载必要的邪恶（我更喜欢关闭身体标签上方的地方）

即使您有条件JavaScript文件也不要太担心。几乎所有领先的编程语言都有机制可以即时完成。

---

关于CSS部分

我不是CSS的专家，所以我不能详细说明。如果你想优化它们，你应该使用一些CSS预处理器，如Sass or LESS or Stylus or something like that。

我不是CSS专家