YUI的加载器的combo选项是否会破坏浏览器缓存？

Question

如果我使用YUI加载器（在Yahoo服务器上）来提供JavaScript，并告诉它使用组合，以便浏览器可以在单个请求中下载多个YUI小部件，那么这是否会使浏览器更难缓存JavaScript？

假设我有一个网站有两个页面，第一个页面使用了YUI日历、对话框和树形小部件，浏览器从YUI的服务器上获取了它们的组合请求。

下一页只使用了YUI日历和对话框，但没有使用树形。这是否意味着现在对Yahoo的服务器来说是一个不同的请求，具有不同的查询字符串？这意味着那两个小部件将再次被下载，即使它们刚刚在第一个页面上使用过吗？

在这种情况下，是更好地向组合服务器发出一个请求，这将导致（在许多情况下）无法缓存的JavaScript的单个请求？还是多个请求用于单独的YUI组件，这些组件可以被缓存？

（YSlow似乎没有提到这个问题。）

- Sean

Answer 1

最好使用组合服务。在首次访问您的页面时，用户会因接收每个文件的http开销和处理开销而受到惩罚。此外，仍然存在浏览器限制并发连接的问题，所以无论是异步还是非异步，未组合处理的文件都会导致更糟糕的页面加载时间。虽然您会从后续页面中缓存的单个文件中受益，但很可能每个页面都会有其他模块请求，这将导致更多的http请求（请记住，一个不同的模块可能意味着在考虑依赖关系之后超过一个模块请求）。因此，它相当于第一页优化的网络IO，然后在后续页面上具有最小的http开销的较大有效载荷，而不是第一页非常不优化的网络IO，然后在后续页面上具有更少的内容和更多的http开销。

如果您的网站有许多启用js的页面或者您试图减轻初始模块加载问题，则可能有理由避免组合。但是，如果问题在于从加载步骤中削减每个最后一毫秒，那么A）您可能会错过更有成效的优化，B）回答您的问题的唯一真正方法是通过分析来得出结论。

解决您所识别的情况的另一种方法是在构建时使用一些自定义卷起模块来配置YUI实例，这些模块代表您使用的常见模块组合。这可能是一个相当复杂的任务，并且自然会引入维护步骤。

因此，总之，您需要担心的可能比您想象的要少，允许使用默认行为使用组合很容易。任何明确的答案都将是具体情况具体分析，基于对您的应用程序进行分析。

- Luke

---

此外，对于特定的用例，您在两个页面上都使用了日历和对话框，但只在一个页面上使用了树形视图。您可以指定一个初始 use(...)，其中包括日历和对话框，然后在使用树形视图的页面上，在运行时稍后调用 Y.use('treeview',...)。 - Luke

我同意找出哪个更好的唯一方法是通过分析。我怀疑最小化HTTP请求并下载更多数据通常比进行多个HTTP请求（这些请求很可能被缓存）要好。然而，这引出了下一个问题：按照这种逻辑，如果HTTP请求比不可缓存的数据更昂贵，那么将所有JavaScript内联包含会不会更好呢？使用服务器端脚本语言将使其变得非常容易，尽管它会导致数据不太可能被缓存，但也会减少一个HTTP请求。 - Sean

内联脚本会阻塞页面渲染，但动态添加的脚本不会。减少内联脚本的数量和大小可以加快页面显示速度。总体上减少脚本的数量（无论是动态还是静态）可以节省http开销，并避免浏览器所施加的并发连接限制。您可以包含一个什么都不做的内联脚本，只需添加一个YUI种子+所有请求模块的< script >标记组合，但您仍需要连接一个“ready”机制来与您的实现代码集成。 - Luke

Answer 2

我认为你可能想要在生产版本中静态加载所有实际使用的内容，并将所有内容压缩成一个文件。

有关静态加载的信息可以在YUI页面上找到，但基本上就是像普通JavaScript一样使用脚本标签来引用所有文件，并使用以下代码进行调用：

YUI().use('*', function(Y) {
    // Any modules that were already loaded on the page statically will now be
    // attached and ready to use. YUI will not automatically load any modules
    // that weren't already on the page.
});

我之前并没有深入参与过缩小文件体积的设置，但我所在的上一个项目中使用的是Uglify。

- JonnyRaa