怎么样最高效率的让页面引入JS,CSS

Question

打开淘宝 凡客等等大型网站都可以看到其CSS和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,footer/footer-min.css?t=20110721.css" rel="stylesheet" />js:(vancl的)：
<script type="text/javascript" src="//js.vanclimg.com/js.ashx?href=[/jquery/jquery-1.4.2.min.js,jquery.lazyload.js,jquery-extend-randomimgplayer.js,jquery.fn.min.js],[/public/cookies_oper.js,ref.js,org.js.jquery.plugins.hoverintent.js,ct.js,google-analytics.js,union_websource.js,trace.js,site_nav.js,autocomplete.js,common.js],[/index/vancl_head.js,indexcontentv7.js]&v=2011072001"></script>请高手解释下这样做的目的和原理 谢谢！

Answer 1

个人理解为：服务端根据这一长串 去找到对应的JS CSS 然后合并为一个 然后返回 减少https数 也方便管理，不知道对不 坐等高手，难道就没有这样做过的吗....

Answer 2

同感，这些css，js的地址可能并不是真正的css，js文件，而是一个jsp、servlet之类的东西

Answer 3

当页面的开发趋于模块化的时候，那么，一个页面可能更多的时候只需要加入相关的HTML片断，css和js就可以很快拼装成一个需要的页面出来。所以这个时候，很多的CSS，js都是基于模块的，所以，如果直接用标签来进行引用的话，加载页面的时候会并发大量的请求，而且对于后期的管理也不利。采用LZ提到的别人网站的方法，可以减少请求量，同时方便后期的维护和管理。

Answer 4

这是一种请求合并的做法正常情况下一个页面可能会载入多个css或者js，如：
<link rel="stylesheet" href="a.css" />
<link rel="stylesheet" href="b.css" />
<script src="a.js"></script>
<script src="b.js"></script>这种情况浏览器每访问一次这个页面就会对服务器产生4个请求去请求这个文件。
这样带来的问题还有，如果样式服务器的根域名与网站存放cookie的根域名相同，每次请求这些静态文件浏览器都会把cookie也带在请求中去请求不需要识别cookie的静态文件中。消耗了服务器和客户端的带宽。
这对访问量很大的网站这样的消耗还是不可小视的。首先淘宝和凡客这么做是为了减少页面请求，这样不仅减轻了服务器访问压力，降低服务器带宽消耗，对客户的用户体验也会更好。抽象出来说就是开发了一套程序，程序接收一个文件列表参数。
程序接收到这些参数后会在服务器上抓取这些文件的内容，通过合并压缩这些文件的内容，然后将其输出到页面上。
相当于合并了所有的请求。假设这个程序的地址是：
http://img.taobao.com/getCss.php
程序接收的参数是csslist
文件列表规则通过|来分割那么上例中的情况就是
http://img.taobao.com/getCss.php?csslist=a.css|b.css
请求的结果就是a.css和b.css合并后的内容，通常还会经过压缩，一些核心的js甚至会混淆输出来达到目的

Answer 5

http://img.taobao.com/getCss.php?csslist=a.css|b.css
的后面通常还会跟随一个时间戳，并通过后端技术手段更新各地CDN的缓存和客户浏览器中的缓存
如：
http://img.taobao.com/getCss.php?csslist=a.css|b.css&v=2011072001以达到用户不会因为CDN或本地缓存访问到老文件的目的

Answer 6

这不就是为了提高效率么。一次性加载完所有css或js存在客户端浏览器缓存里面。提高访问速度。

Answer 7

http://img.taobao.com/getCss.php?csslist=a.css|b.css
这个请求是咋处理的呢- -
不懂，求解

Answer 8

我们前端开发人员一般都知道 每个<script>标签初始下载时都会阻塞页面渲染 所以减少页面包含的<script>标签数量有助于改善这个情况，最小化延迟时间将会明显改善页面的总体性能。由于HTTP请求会带来额外的性能开销，举个例子 下载单个100KB的文件比下载4个25KB的文件更快。同场大型网站，就像LZ上边那两个网站 需要依赖数个js文件，可以把多个文件合并成一个，这样只有一个<script>标签，可以减少性能消耗。文件合并一般通过离线的打包工具，好像Yahoo有一套实时的在线服务。Yahoo 好像有自己的合并处理器，任何网站都可以使用一个把文件合并处理后的URL来获取任意数量的文件，例如：
假设url http://.....jquery.min.js&....event-min.js 这个url加载了两个js文件，这两个文件在服务器上是独立存在的，但通过请求这个url他们会被合并 这样达到了用一个<script>标签加载两个甚至多个js文件，大大降低页面渲染所需的HTTP请求数，提高了性能。以上是个人一点愚见，有不妥之处，欢迎各位拍砖指正。

Answer 9

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,footer/footer-min.css?t=20110721.css" rel="stylesheet" />
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,footer/footer-min.css?t=20110721.css
这些以,号隔开的都是参数的值，后台处理这些参数加载相应的 css 文件进来。以便于统一管理

Answer 10

http://www.360doc.com/content/11/0715/10/1542811_133675788.shtml
百度了下，原来合并文件是这样生成的，呵呵
学习了

Answer 11

大家可以看看这个，在服务端合并和压缩JavaScript和CSS文件
http://ued.koubei.com/?p=1193Nginx 和Apache都有此功能

Answer 12

是在服务端合并和压缩JavaScript和CSS文件单独请求一下
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,footer/footer-min.css?t=20110721.css很明显只返回一个文件

Answer 13

自动合并的话很好啊。
最理想状态全部网站的CSS和JS总共只占俩HTTP请求。

Answer 14

模块化样式和js 用js框架进行按需加载 淘宝用的 seaJs框架 还有 rquriseJs 你可以看看,不是每次请求都加载的,是在框架中进行处理,一次加载,加载过的就不在加载了