## 一、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.hmoore.net/kancloud/web_performance_optimization/80987