使用单个http请求加载多个CSS文件

时间:2012-04-11 07:30:25

标签: css http yahoo

当我查看yahoo邮件的源代码时,我在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请求分隔每个文件并加载它们?

5 个答案:

答案 0 :(得分:1)

在这种情况下,似乎有一个脚本将css文件加入到单个响应中。

脚本的路径是http://mail.yimg.com/zz/combo。它接受几个包含CSS文件路径的参数,这些参数将被连接并可能缩小。

如果您使用该网址,您可以看到您可以从网址中删除-min - 前缀,并获得未经通知的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

答案 1 :(得分:1)

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

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

答案 2 :(得分: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(或其他来源)阅读。

答案 3 :(得分:0)

如果你把URL分开,你看到的是它是一个叫做“combo”的请求,传递各种查询字符串键(注意没有值),这些键是一些CSS文件的路径。

然后,在使用服务器端语言的情况下,将以标准方式提取这些键,并将该URL解析为变量,然后将其全部返回给响应。

答案 4 :(得分:0)

对于他们的yui项目,雅虎开发有一个名为yuiloader的项目。虽然主要是为yui设计的,但代码似乎也可以设置为提供其他文件。这不仅仅是COMBO。它也有依赖性。用JS和CSS。 由于Yahoo是YUI中的Y,这可能是mail.yimg.com的代码库。 代码可以在https://github.com/yui/phploader找到。