5

当我查看 yahoo mail 的源代码时，我看到一个link标签中有多个 css 文件，使用&如下所示的符号： 

href="http://mail.yimg.com/zz/combo?kx/ucs/uh/css/271/yunivhead-min.css&kx/ucs/uh/css/221/logo-min.css&kx/ucs/avatar/css/17/avatar-min.css"

有谁知道，他们如何分离每个文件并使用单个 http 请求将它们全部加载？

4

5 回答 5

1

在这种情况下，似乎有一个脚本将 css 文件连接成一个响应。

脚本的路径是http://mail.yimg.com/zz/combo. 它接受几个包含 CSS 文件路径的参数，然后将它们连接起来并可能缩小。

如果您使用 URL，您可以看到您可以-min从 URL 中删除 -Prefixes，并得到未缩小的 CSS 文件作为回报： http: //mail.yimg.com/zz/combo ?kx/ucs/uh /css/271/yunivhead.css&kx/ucs/uh/css/221/logo.css&kx/ucs/avatar/css/17/avatar.css

周围有几个 CSS 缩小器，例如CSSmin。但由于这是一个 Yahoo 页面，他们可能使用自己的 CSS 压缩器YUI。有关其工作原理的详细信息，请参阅http://developer.yahoo.com/yui/compressor/#work。

于 2012-04-11T07:35:59.680 回答
1

不熟悉细节，但 URL 看起来像一个带有 CSS 文件作为未命名参数的查询字符串。

http://mail.yimg.com/zz/combo将是一个加载 CSS 的服务，然后在返回给客户端之前连接并可能缩小文件。

于 2012-04-11T07:37:08.927 回答
0

我的猜测是http://mail.yimg.com/zz/combo是一个小程序/脚本，它收集所有参数（如 kx/ucs/uh/css/271/yunivhead-min.css、kx/ucs/uh /css/221/logo-min.css, kx/ucs/avatar/css/17/avatar-min.css)，将它们捆绑并最小化。

这类似于 MVC 的捆绑功能，您可以在http://www.davidhayden.me/blog/asp.net-mvc-4-bundling-and-minification（或其他来源）上阅读。

于 2012-04-11T07:35:42.177 回答
0

如果你把 URL 拆开，你会看到它是一个名为“combo”的请求，它传递了各种查询字符串键（注意没有值），这些键是一些 CSS 文件的路径。

考虑到正在使用的服务器端语言，这些键将以标准方式提取，并且该 url 的 CSS 在完整返回到响应之前被解析为变量。

于 2012-04-11T07:36:58.567 回答
0

对于他们的 yui 项目，yahoo 开发了一个名为 yuiloader 的项目。虽然主要是为 yui 设计的，但代码似乎也可以设置为服务其他文件。这比 COMBO 做得更多。它还可以解决依赖关系。使用 JS 和 CSS。由于 Yahoo 是 YUI 中的 Y，这可能是他们的 mail.yimg.com 的代码库。代码可以在https://github.com/yui/phploader上找到。

于 2012-04-11T07:41:44.607 回答