前端性能优化一：合并css\javascript

作为前端工程师的我们都知道阿里在前端技术方面是佼佼者，所以我有空没空会经常逛淘宝，不是为购物，实则是为了查看淘宝是否推出了什么新技术，前几天按F12查看淘宝源码的时候，发现了一个奇怪的问题，一个link引用多个CSS文件或者一个JS的SRC引用了多个JS文件，中间用逗号隔开（如下图），作为菜鸟的我甚是好奇。
这个叫静态资源打包，因为浏览器下载静态文件的时候是有线程数限制的：同一时间针对同一域名下的请求有一定数量限制，超过限制数目的请求会被阻塞。为了提高性能，服务器端会把js/css合并成一个文件（因为都是文本嘛）再向客户端输出，这样页面能更快的展现，用户等待的时间就会减少，你留住用户的机会将会大大增加。我想淘宝也是基于这种技术的。

各个浏览器公布的资源并发数限制个数，各位看官有兴趣可以自己研究下。

可是有人会说这样压缩合并的css\js不方便调试，比如我把压缩之后的打包文件发上去了，发现线上出bug了怎么办？

我推荐你用这种方案，和开发配合起来，比如后台是php，我可以在引用style-min.css的时候这么写：

if(isset($_GET['cssDebug'])){
    echo '    <link href="http://***/style.css">';
}else{
    echo '    <link href="http://***/style-min.css">';
}

这样在线上，你可以在url后面加上 cssDebug 参数（当然你可以随便定义参数名称），那么页面就引用了没有压缩过的css样式，你也可以任意调试，而普通访客进来，没有加这个参数，全部是引用的style-min.css这个压缩之后的脚本。

回归重点，怎么样压缩合并css\javascript文件呢，百度搜索啊，各种各样的都有，有在线合并压缩的，有各种前端自动化工具帮你合并压缩，包括但不限于webpack,gulp,grunt等，就看你自由发挥啦，因为我也是菜鸟，一起学习共勉。