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

发布于 2022-08-27 13:04:47 字数 540 浏览 20 评论 0

例如这样的地址:
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做了特殊处理:服务端根据逗号做切割,找到相应的文件最后合并返回, 还是一般的服务器也可以这么做? 怎么实现类似功能

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

盗心人 2022-09-03 13:04:47

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

  1. 在服务端合并和压缩JavaScript和CSS文件
  2. nginx js、css多个请求合并为一个请求(concat模块)
  3. 使用Tengine concat模块合并多个CSS,JS 请求
≈。彩虹 2022-09-03 13:04:47

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

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

无法回应 2022-09-03 13:04:47

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文