web前端优化之combo handler 的引入

Posted 2020-06-18

背景

　　Combo Handler 是 Yahoo! 开发的一个 Apache 模块，它实现了开发人员简单方便地通过URL来合并javascript和CSS文件，从而大大减少文件请求数。

　　目的

　　它满足 Yahoo! 前端优化第一条原则：Minimize HTTP Requests，来减少三路握手和HTTP请求的发送次数。

　　国内实例

　　淘宝网首页meta里多个js合并的声明：

　　js之间用英文逗号或&符号分隔。此src的Response是多个js文件的内容拼装。

　　国内的 Combo Script 支持

　　淘宝李晶-拔赤在 https://github.com/jayli/combo 下发布了combo.php和minfy.php，能够做到合并文件(不压缩)，以及合并且压缩。

　　文件列表：

　　- combo.php 合并文件，不压缩

　　- minify.php 合并压缩文件

　　- cssmin.php 压缩css

　　- jsmin.php 压缩js

　　- cb.php 淘宝CDN合并文件策略的模拟

　　脚本使用:

　　- 要求php5及以上版本

　　- 程序在找不到本地文件的情况下，会去指定的cdn上找同名文件

　　- 程序会自动转义-min文件为源文件，因此要约定-min文件和原文件要成对出现

　　- 需要定义combo.php和minify.php中的$YOUR_CDN变量

　　- 如果只是合并压缩local文件，则不必重置$YOUR_CDN变量

　　- 这里提供cb.php，用来实现tbcdn的开发环境的模拟,apache的配置在cb.php中

　　CDN上的 Combo Handler支持

　　1.2008年7月YUI Team宣布在YAHOO! CDN上对YUI JavaScript组件提供Combo Handler服务。

　　2.淘宝CDN支持Combo Handler，用逗号分隔js/css，用两个问号来触发combo特性：

　　- http://a.tbcdn.cn/??1.js,2.js

　　- http://a.tbcdn.cn/subdir/??1/js,2.js

　　用一个问号来添加时间戳，如：

　　- http://a.tbcdn.cn/??fp/directpromo.js?t=2012062320120712

　　我们的 combo handler 服务

　　用逗号分隔，用一个问号触发combo特性：

　　http://s0.55tuanimg.com/combo/?www/55css130501/css/public.css,www/main130501/css/mainbody0508.css和http://s0.55tuanimg.com/combo/?www/main130501/js/plugin.js,www/main130501/js/user.js

　　为了避免 CDN 缓存错误的版本，combo上线的访问策略是：

　　1) 静态文件传到服务器端;

　　2) 部署人员使用线上静态文件服务器的IP地址直接请求combo服务，挨个儿combo请求(目前是css一组，js一组)一次;

　　3) 部署人员确认上面的请求都成功、内容无误后，再换成CDN地址再次请求，确保CDN缓存正确的文件内容。