首页 > 淘宝首页加载css js的url 利用逗号切割, 同时加载多个文件实现思路?

淘宝首页加载css js的url 利用逗号切割, 同时加载多个文件实现思路?

例如这样的地址:
http://g.tbcdn.cn/??tb/global/2.5.3/global-min.js,tb/tb-fp/1.5.6/core-min.js?t=20131218
http://g.tbcdn.cn/??tb/global/2.5.3/global-min.css,tb/tb-fp/1.5.6/style-min.css?t=20131218
可以同时加载多个js或css 文件。 是淘宝cdn做了特殊处理:服务端根据逗号做切割,找到相应的文件最后合并返回, 还是一般的服务器也可以这么做? 怎么实现类似功能


跟雪碧图一样,合并文件减少请求次数达到优化的目的,这个在自己服务器上也可以做的。搜索“css js 请求合并”等关键词就能搜索到很多东西,这里放几个仅供参考:

  1. 在服务端合并和压缩JavaScript和CSS文件
  2. nginx js、css多个请求合并为一个请求(concat模块)
  3. 使用Tengine concat模块合并多个CSS,JS 请求

PHP 类似实现 Minify https://github.com/mrclay/minify
实测效果非常好,可以配合Memcache使用
原理就是根据URL参数解析JS/CSS文件名称,动态程序处理流程
首次1):逐个读取文件->压缩(去除空白符,注视等)->合并->缓存
二次2):逐个读取前检测mtime修改状态,与上次是否一直,不一致则执行 1) 一致直接缓存读取输出


这个特性叫做 combo,Nginx 上有插件实现(Apache 不知道~)。

另外可以参考一下 Sea.js(支付宝用的前端模块加载器)的 combo 插件的一个讨论帖,里面有比较详细的介绍:
https://github.com/seajs/seajs-combo/issues/3

【热门文章】
【热门文章】