2012-04-11 43 views
5

當我認爲雅虎郵件的源代碼,我看到在使用&符號link標籤多個CSS文件多個CSS文件,如下圖所示:裝入有一個HTTP請求

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請求加載它們?

+0

有關組合處理程序的更多詳細信息,請轉到[鏈接](http://developer.yahoo.com/yui/docs/YAHOO.util.YUILoader.html#property_comboBase) – 2012-04-11 08:28:21

回答

1

在這種情況下,似乎有一個腳本將css文件連接到單個響應中。

到腳本的路徑是http://mail.yimg.com/zz/combo。它接受包含CSS文件路徑的幾個參數,這些參數將被連接並可能被縮小。

如果你玩的網址,你可以看到,你可以從URL中移除-min -Prefixes,你會得到unminified 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 minifiers左右,例如CSSmin。但由於這是一個雅虎頁面,他們可能會使用他們自己的CSS壓縮器,YUI。有關它的工作原理的詳細信息,請參閱http://developer.yahoo.com/yui/compressor/#work

+0

謝謝。正如所有人都指出'** Combo **'是關鍵,我搜索了'Combo和YUI'並找到了有用的東西[Here](http://yuiblog.com/blog/2008/07/16/combohandler/ )。正如您和@skotos所建議的,YUI加載器已被使用。 – 2012-04-11 08:23:58

0

如果你把你看到的除了什麼是它的東西的請求被稱爲「組合」通過各種查詢字符串鍵(注意這裏沒有值)是一些CSS文件的路徑的URL。

這些鍵然後在給定正在使用的服務器側的語言和該URL在其整體被返回到響應之前解析成一個變量的CSS標準的方式被提取。

1

不熟悉的細節,但該網址看起來像一個查詢字符串的CSS文件的未命名參數。

http://mail.yimg.com/zz/combo將是加載CSS,然後會連接和服務可能返回到客戶端之前minifies文件的服務。

0

對於他們的yui項目,yahoo開發了一個名爲yuiloader的項目。雖然主要爲yui設計,但代碼似乎也可以設置爲服務其他文件。這不僅僅是COMBO。它也解決依賴。與JS和CSS。 由於Yahoo是YUI中的Y,所以這可能是他們對mail.yimg.com的代碼庫。代碼可在https://github.com/yui/phploader上找到。