3

YSlow 报告表明

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

Q1。任何机构都可以详细说明如何将它们合并为一个快速？

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

4

4 回答 4

8

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

这是一个很好的经验法则，但不要太执着于它。如果您需要为不同的目的加载不同的版本，请继续这样做，前提是您不要将代码和 CSS 拆分为太多的小片段

什么构成“太多”是特定于站点和系统的。尝试一些组合，找到适合你的。每个系统都是不同的。

于 2013-06-22T07:54:22.273 回答
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.

去做吧。你必须。

于 2013-06-22T07:55:06.617 回答
1

对于那种情况，我在我的 PHP 框架中构建一个处理请求的压缩器。Css 或 JS。我只需要包含每个文件，它会根据 HTTP Header 组合和缓存。

于 2013-06-22T08:09:55.383 回答
1

在 JavaScript 部分

恕我直言，您不能将所有这些结合起来并最小化，因为它不会始终为您提供最佳性能。诀窍是对您拥有的 JavaScript 文件进行分组和最小化。例如，假设您将这些 js 文件加载到您的页面中

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

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

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

  1. 从 CDN 加载 JavaScript 库（如果您使用没有 CDN 的库，则问题非常严重）
  2. 合并提供有用内容的文件，然后加载它们
  3. 合并你的文件，让网站变得超级性感
  4. 最后加载必要的邪恶（我更喜欢在结束体标签上方的地方）

即使您有条件 JavaScript 文件也不要太担心。几乎所有领先的编程语言都有动态执行此操作的机制。

在 CSS 部分

我不是 CSS 方面的专家，所以我不能详细说明。如果你想优化它们，你真的应该使用一些 CSS 预处理器，比如Sass 或 LESS 或 Stylus 或类似的东西。

我不是 CSS 专家

于 2013-06-22T08:40:22.207 回答