前端资源合并

连接数的概念

连接数也是所谓的请求数, 每个资源都会从客服端独立发一个请求到服务端(当然重复的不算, 这些资源包括css,js,img等)

连接数多带来的问题

因为每一个连接数都要经历一个"漫长的过程", 要发送TCP请求, 然后什么DNS解析成IP, 各种连, 各种多, 然而人要知道每个连接都(可能)有cookie, Header请求头, Respose响应头等信息, 而即使这些数据再小, 也吃不住量大吧? 比如你的静态资源cookie有100个字, 你的页面有10个css, 50个图, 10个JS, 那么你累加下看看cookie有多大, 当然现实中我们的连接数要往往比这个数值大的多, 你是不是在侥幸的想样式中的背景图会不会是连接数, 很高兴的告诉你, 只要是你页面中会出现的元素且是服务器上的, 那么都是一个连接数...

注: 由于cookie的问题从而可以发现现各大网站的静态资源域名都是跟网站区分出来的, 比如 qhimg.cn, qqimg.cn, 360buyimg.com等, 因为这样可以减少cookie容量... 当然你会不会说大站上还有一些 img0.qqimg.cn, img1.qqimg.cn等之类的域名, 这些又牵扯到cdn加速和图片分布式, 改天再说这个技术.

合并js/css连接

1, php minify

她是一款支持缓存的动态合并, 个人使用表示很好用, 表现如: /min/?b=lib&f=Dmimi.js,Dmimi.selector.js,Dmimi.tool.js,Dmimi.event.js,Dmimi.net.js

2, http contcat

她是一款nginx上的扩展模块, 原创于阿里, 也大量应用于阿里系, 表现如: /js/??lib/msc.min.js,lib/msc-user.min.js,lib/jquery.js,lib/jquery-tab.js

3, grunt/spm

她是一款在nodejs环境下的工具(我是这样叫的), 她可以根据自己的配置来打包/生成自己的项目, 且任务功能强大(本人在用)

合并img(sprite)

1, ps手动合并

2, grunt-css-sprite grunt任务式合并

3, AutoSprite    php方式的自动合并