首页 新闻 搜索 专区 学院

一个javescript 的src引用多个文件,一个link引用多个CSS文件

1
悬赏园豆:50 [已解决问题] 解决于 2011-12-16 10:12

查看了淘宝网的首页源文件,看到这样的一个特殊的

<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">

飞船的主页 飞船 | 初学一级 | 园豆:13
提问于:2011-12-15 15:25
< >
分享
最佳答案
0

对,这个问题 问的很好,许多高浏览量的大型网站 为了方便加快网站的显示速度,减少页面的缓冲,将多个js/css文件合并成一个,这样当用户打开网站的时候,一个js/css链接就只需要像服务器发送一次请求,如果是多个,则需要执行多次请求.所以这样减少了向服务器发送请求的次数,用户查看到完整页面的速度也快了很多,因为很多用户并不愿意在等待网站页面缓冲上花费太多时间.

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

淘宝还有很多类是的案例,比如淘宝商城一个很长的商品介绍页面,为了加快页面显示速度,只显示你浏览器大小的页面内容,下面你没看到的内容先不显示,当你将鼠标移到下面看其他商品图片的时候,它才像服务器发送请求来显示下面的页面内容

这个叫 图片延迟加载技术(ImageLazyLoad)

收获园豆:20
SilverSky(Jason) | 菜鸟二级 |园豆:220 | 2011-12-15 20:24

谢谢大侠支持,学到了。

飞船 | 园豆:13 (初学一级) | 2011-12-16 10:09

@飞船: 你是怎么弄的。帮帮忙

佩恩ve | 园豆:200 (初学一级) | 2012-10-11 17:20
其他回答(4)
0

我的理解: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了,这样减少请求服务器端的次数提高性能。

收获园豆:10
LCM | 园豆:6876 (大侠五级) | 2011-12-15 15:36

很对,应该就是这个意思。

支持(0) 反对(0) 飞船 | 园豆:13 (初学一级) | 2011-12-16 10:10
3

这个叫静态资源打包,因为浏览器下载静态文件的时候是有线程数限制的,所以下载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。基本思想就是这样,具体的你可以搜一下。

收获园豆:20
水牛刀刀 | 园豆:6350 (大侠五级) | 2011-12-15 15:39

恩 很对,我google了一下。谢谢你的帮助。

支持(0) 反对(0) 飞船 | 园豆:13 (初学一级) | 2011-12-16 10:10
0

回答只为mark...

coder_wang | 园豆:193 (初学一级) | 2011-12-15 17:04
0

那请问一个link引用几个css文件合适,大型网站的话肯定不止一个css文件·???

Link_miao | 园豆:202 (菜鸟二级) | 2012-06-23 01:30

网站首先要进行CSS文件合并和压缩,如果合并压缩后还有多个的话可以使用这种方式进行合并请求,服务器端再对文件进行整合合并,至于引用几个CSS文件合适,这个没有具体的要求,但是合并压缩后的CSS文件不会太多吧!

支持(0) 反对(0) 飞船 | 园豆:13 (初学一级) | 2012-06-24 10:35

@飞船: 网站首先要进行CSS文件合并和压缩??什么意思?不懂。。不是直接在页面写<link src="多个css文件(可以写多少个?)">就行了吗?

支持(0) 反对(0) Link_miao | 园豆:202 (菜鸟二级) | 2012-06-24 19:47
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册