一个link加载多个css文件

Posted 2020-10-02 Lorem

细看正则时匹配慕课网链接时发现的，一个link加载多个css文件

http://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,u/u_common-less.css,u/plans-less.css,u/dynamic/home-less.css?v=201708111926

淘宝也有这样的链接

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,local-life/local-life-min.css,footer/footer-min.css?t=20111213.css

原先我们使用link时每一个加载一个css文件，这种方式有一些缺点：

1、浏览器可以并行的http请求数量有限，不能满足大型站点的要求；

2、如果不支持keep-alive，tcp连接的重建也需要花费一些时间，导致延迟增加；

3、即使支持keep-alive，过多的请求头和响应头会增加大量的数据开销；

上面链接的方式是在服务器接收到请求之后，把页面需要的资源进行合并，一起返回给浏览器，这样只需要一次http请求，就能够获得所需要的资源文件，节省网络开销。

只是这是网站的CDN具备的独有功能，这种写法并不是html的规范，因此并不是所有人都可以这么用的，只有支持这种写法的服务器，才可以这样写。

但是采用这种合并js、css的方式会有一些缺陷：

1、静态资源服务器需要动态合并静态资源到一个输出流中，也就是说，静态资源服务器要有一个网关应用程序去支持这种处理。当然这种处理是要消耗额外的硬件性能。
2、文件整合会使http缓存能力降低，一定程度上增加了服务器的压力。试想一下，如果我们有四个js文件。A.js，B.js，C.js，D.js。我们如果只改变了D.js。正常情况下。浏览器还是可以继续使用A、B、C的缓存，只更新D.js就可以了。但是由于我们采用了合并的方式。现在我们需要重新返回四个文件的合并结果。