## 一、CSS Sprites（图片合并） **原理：** 将多个小图合并成一张大图，再用css的背景图片定位（background-position）来显示指定的小图。 **优点：** 减少http请求次数，提升加载速度。 在线合并地址：http://alloyteam.github.io/gopng 客户端下载地址：http://www.lsxm.tech/forum.php?mod=viewthread&tid=21 注：后期CSS Sprites可用构建工具统一自动合并，无需手工合并。 ## 二、资源文件压缩合并 1、引用第三方插件时，尽量用.min.js或.min.css的压缩文件。 2、发布时采用压缩工具或前端构建工具对业务的css或js进行压缩合并。 3、服务器开启Gzip网页压缩。 ## 三、设置浏览器缓存 * httpStatus :304 * 资源文件url加时间戳。 * max-age有效期。 * CDN技术 http://www.cnblogs.com/lovesong/p/5352973.html ## 四、页面结构优化 ####将css文件统一放到head标签里，将js文件统一放到body标签的底部。保证整体页面优先加载，再请求js文件并执行相关交互操作。 ## 五、应用字体图标 * 矢量图放大不失真 * 大小、颜色灵活改 * 请求次数少，加载快 http://fontawesome.io/icons ## 六、代码上的优化 说来话长，自行百度。http://www.cnblogs.com/mfc-itblog/p/5950058.html **详细的优化说明：** http://www.kancloud.cn/kancloud/web_performance_optimization/80987