2012-04-11 16 views
5

Khi tôi xem mã nguồn của yahoo mail, tôi thấy nhiều file css trong một thẻ link sử dụng một biểu tượng & như hình dưới đây:tải nhiều file CSS với yêu cầu http đơn

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" 

Có ai biết, làm thế nào họ tách từng tệp và tải tất cả chúng bằng một yêu cầu http duy nhất?

+0

Để biết thêm chi tiết về trình xử lý kết hợp, hãy truy cập [link] (http://developer.yahoo.com/yui/docs/YAHOO.util.YUILoader.html#property_comboBase) –

Trả lời

1

Trong trường hợp này, dường như có một tập lệnh tham gia các tệp css vào một câu trả lời duy nhất.

Đường dẫn đến tập lệnh là http://mail.yimg.com/zz/combo. Nó chấp nhận một số tham số có chứa đường dẫn đến tệp CSS, sau đó sẽ được nối và có thể được rút gọn.

Nếu bạn chơi xung quanh với URL, bạn có thể thấy rằng bạn có thể loại bỏ các -min -Prefixes từ URL và bạn sẽ có được các tập tin CSS unminified lại: 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

Có một số minifiers CSS xung quanh, ví dụ CSSmin. Nhưng vì đây là trang Yahoo, họ có thể sử dụng máy nén CSS của riêng mình, YUI. Để biết chi tiết về cách hoạt động, hãy xem http://developer.yahoo.com/yui/compressor/#work.

+0

Cảm ơn. Như mọi người đã chỉ ra rằng '** Combo **' là chìa khóa, tôi googled cho 'Combo và YUI' và tìm thấy một cái gì đó hữu ích [Ở đây] (http://yuiblog.com/blog/2008/07/16/combohandler/). Theo đề xuất của bạn và @skotos, trình tải YUI đã được sử dụng. –

0

Tôi đoán là http://mail.yimg.com/zz/combo là một chương trình/tập lệnh nhỏ thu thập tất cả các thông số (như kx/ucs/uh/css/271/yunivhead-min.css, kx/ucs/uh/css/221/logo-min .css, kx/ucs/avatar/css/17/avatar-min.css), nhóm chúng lại và thu nhỏ chúng.

Điều này tương tự như tính năng gói cho MVC, bạn có thể đọc tại http://www.davidhayden.me/blog/asp.net-mvc-4-bundling-and-minification (hoặc các nguồn khác).

0

Nếu bạn tách URL ra ngoài những gì bạn thấy là yêu cầu thứ gì đó gọi là "combo" truyền vào các khóa truy vấn khác nhau (lưu ý không có giá trị) là đường dẫn đến một số tệp CSS.

Các khóa này sau đó sẽ được trích xuất theo cách tiêu chuẩn được sử dụng ngôn ngữ phía máy chủ và CSS cho url đó được phân tích thành biến trước khi được trả về toàn bộ cho phản hồi.

1

Không quen thuộc với chi tiết cụ thể, nhưng URL trông giống như chuỗi truy vấn có tệp CSS dưới dạng tham số chưa đặt tên.

http://mail.yimg.com/zz/combo sẽ là dịch vụ tải CSS, sau đó ghép nối và có thể rút gọn các tệp trước khi phân phát lại cho khách hàng.

0

Đối với dự án yui của họ, phát triển yahoo có một dự án có tên là yuiloader. Trong khi được thiết kế chủ yếu cho yui, mã có vẻ như nó có thể được thiết lập để phục vụ các tệp khác. Điều này không nhiều hơn COMBO. nó cũng làm việc ra những phụ thuộc. với JS và CSS. Vì Yahoo là Y trong YUI, đây có thể là cơ sở mã của họ cho mail.yimg.com. Mã có thể được tìm thấy trên https://github.com/yui/phploader.