静态资源打包,因为浏览器下载静态文件的时候是有线程数限制的:同一时间针对同一域名下的请求有一定数量限制,超过限制数目的请求会被阻塞。为了提高性能,服务器端会把js/css合并成一个文件,再向客户端输出,这样页面能更快的展现,用户等待的时间就会减少,你留住用户的机会将会大大增加。

 
原html代码:
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/button/button-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/editor/editor-beta-min.js"></script> 在一个没有cache缓存的机器上,此代码会产生6个http请求,而且此6个htt请求不能并发执行,导致加载变慢

合并:

<script type="text/javascript"
src="http://yui.yahooapis.com/combo?2.5.2/build/yahoo-dom-event/yahoo-dom-event.js,
2.5.2/build/container/container_core-min.js,2.5.2/build/menu/menu-min.js,
2.5.2/build/element/element-beta-min.js,2.5.2/build/button/button-min.js,
2.5.2/build/editor/editor-beta-min.js"></script>

优化结果:下载6个单独的js共需要190毫秒左右,而将6个js合并为一个需要30毫秒左右,耗时和一个单独的js文件差不多。

一个没有cache缓存的机器上,此代码会仅产生1个http请求,虽然下载的总字节数没有变,但是将减少了浏览器和服务器之间的http请求次数,相应减少了http请求的通信量和http响应的通信量。

04-14 10:00