web前端性能評測和常規優化方案（1）

如何評測前端性能和優化？

前端開發頁面要遵循的基本標準：
1. 統一使用框架、樣式表base
2. html、CSS、JS編碼要符合前端基本規範
3. CSS、JS進行壓縮，多個CSS、JS時，須要進行CDN合併
4. 除必定須要預加載框架在頭部外，頁面及其餘腳本統一放在body結束標籤以前，並進行CDN合併
5. CSS統一放在頭部，在覈心JS框架引入以前；對頁面CSS和base進行CDN合併加載
6. CN各項目前臺頁面使用PMS中統一的頭和尾
7. 對UI或產品頁面進行圖片延遲按需加載
針對重點頁面：

評測性能：使用性能測試工具
（firebug、yslow、pageSpeed等）進行，主要有如下幾點：
1. 頁面首屏加載時間
2. 頁面大小、ready和loaded加載時間
3. 腳本和樣式表加載個數、大小、請求時間
4. 背景圖片請求數數、大小、請求時間，進行無損壓縮
5. 產品圖片大小、請求時間，進行無損壓縮
6. 腳本、樣式、圖片的請求次序
7. 使用阿里測在線工具測試（http://www.alibench.com/）
8. 各ajax請求接口的時間和數據大小
9. 服務器端是否進行CDN加速
10. 服務器端是否啓用Gzip壓縮
11. (背景圖片請求數數、大小、請求時間, 產品圖片大小、請求時間)
根據評測報告，制定優化方案：
1. 提升首屏加載時間
2. 壓縮css\js\html\image
3. 對腳本和樣式進行CDN合併文件，減小腳本和樣式文件的請求個數
4. 對背景圖片使用CSS sprite，儘可能控制在三張之內，並進行無損壓縮
5. 結合UI交互對頁面模塊使用模塊化按需加載
6. 提升ajax請求接口性能，能夠進行合併請求的就進行合併
7. 對html\css\JS的代碼進行內部優化，去掉冗餘和影響性能的點
8. 須要服務器端進行CDN或Gzip時，聯繫PM和開發有運維進行

最後要對性能數據優化先後對比，總結報告並彙報。持續進行優化。。。

注：此文章是好久之前寫的筆記，但願對初學者有幫助，貼出來供前端夥伴學習交流！

 後續會針對移動端及hybrid分別進行總結分享.....