靜態資源打包:一個javescript 的src引用多個文件,一個link引用多個CSS文件


疑惑描述:

查看了淘寶網的首頁源文件,看到這樣的一個特殊的

<script src="http://a.tbcdn.cn/??s/kissy/1.1.6/kissy-min.js,p/global/1.0/global-min.js,p/et/et.js?t=2011092320110301.js"></script>

里面用逗號分隔了幾個js文件kissy-min.js,p/global/1.0/global-min.js,p/et/et.js

這個是什么道理?同樣的還有CSS 

<link href="http://a.tbcdn.cn/p/fp/2011a/??html5-reset-min.css,global-min.css,header/header-min.css,product-list/product-list-min.css,attraction/attraction-min.css,expressway/expressway-min.css,category/category-min.css,category/sub-promotion-min.css,guide/guide-min.css,hotsale/hotsale-min.css,bottom-gg/bottom-gg-min.css,subfooter/subfooter-min.css,local-life/local-life-min.css,footer/footer-min.css?t=20111213.css" rel="stylesheet">

又如蝦米中的(http://res.xiami.net/??static/js/lib/jquery.tmpl.min.js,static/js/app/relation.js,static/js/app/nameCard.js?ver=20140116-175037)

 

解答:

這個叫靜態資源打包,因為瀏覽器下載靜態文件的時候是有線程數限制的,所以下載1個100K的js/css,會比10個10k的js/css快的多,為了提高性能,服務器端會把js/css合並成一個文件(因為都是文本嘛)再向客戶端輸出。比如,一個請求的地址是:http://www.abc.com/static/pack?js=a,b,c,d,e,那么服務器端你在這個請求的接口里,根據js參數的值,把a.js到e.js的內容讀取出來,再合並成一個文件(一般同時還會壓縮,比如去空格,比如縮短變量名等),輸出到客戶端。如果服務器端再加上緩存,那可能連合並都不需要了。這樣頁面加載速度會快非常多。比較常用的js打包工具有google的google closure,css用yui compressor。基本思想就是這樣,具體的你可以搜一下。

 

 

http://a.tbcdn.cn/??s/kissy/1.1.6/kissy-min.js,p/global/1.0/global-min.js,p/et/et.js?t=2011092320110301.js 雖然你看着像三個js文件用逗號分隔,其實對javascript來說是一個文件名,你可以復制放在瀏覽器地址欄里訪問的。可能實際確實是三個js文件 的,但是通過http://a.tbcdn.cn這個服務器程序資源打包以后,做為一個response了,這樣減少請求服務器端的次數提高性能。

 

href中的內容:http://st.******.com/??css/basic/core_mod.css,res/css/default/main15.css,res/css/default/beta15.css,res/player/img/web_player.css?v10182012,其實真實的指向地址是:http://st.******.com/,?后面的內容是查詢字符串,服務器端會解析這個查詢字符串中包含的多個文件,並且合並到一個文件中,最終的目的是減少瀏覽器發出請求的次數,達到優化頁面打開時間的效果。

 

許多高瀏覽量的大型網站 為了方便加快網站的顯示速度,減少頁面的緩沖,將多個js/css文件合並成一個,這樣當用戶打開網站的時候,一個js/css鏈接就只需要像服務器發送一次請求,如果是多個,則需要執行多次請求.所以這樣減少了向服務器發送請求的次數,用戶查看到完整頁面的速度也快了很多,因為很多用戶並不願意在等待網站頁面緩沖上花費太多時間.

你可以看看這個http://www.cnblogs.com/shoupifeng/archive/2010/01/12/1645431.html

淘寶還有很多類是的案例,比如淘寶商城一個很長的商品介紹頁面,為了加快頁面顯示速度,只顯示你瀏覽器大小的頁面內容,下面你沒看到的內容先不顯示,當你將鼠標移到下面看其他商品圖片的時候,它才像服務器發送請求來顯示下面的頁面內容

這個叫 圖片延遲加載技術(ImageLazyLoad)

 

一個link引用幾個css文件合適,大型網站的話肯定不止一個css文件·???

網站首先要進行CSS文件合並和壓縮,如果合並壓縮后還有多個的話可以使用這種方式進行合並請求,服務器端再對文件進行整合合並,至於引用幾個CSS文件合適,這個沒有具體的要求,但是合並壓縮后的CSS文件不會太多吧!

 

延伸:http://www.cnblogs.com/shoupifeng/archive/2010/01/12/1645431.html

http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM