前端優化清單（一）：之首屏優化

前端性能優化清單：

前端優化項	優化內容	備註
首屏	首屏優化到0.5-2s，前端優化首選。	優化切入口，目標<2s
內容	圖片、JS、Script、Flash等元素是頁面和應用的主要構成，也是前端優化的重點。	網頁元素過多
請求	頁面元素的數量、加載文件的多少、大小，決定了頁面的加載時間和效率。優化和規避請求。	域名數量和解析
CSS	頁面樣式，動畫的實現，特效的實現，決定頁面外在表現和交互效果。	靜態頁面佈局
JavaScript	JS串行加載等特殊性，是影響頁面性能的主要緣由之一，並且比重大，不管大小、邏輯、數量都需嚴格控制。	性能殺手
圖片	頁面中，60%以上的請求和大小都是由圖片構成，圖片加載決定了頁面加載的快與慢。	成本優化

首屏優化原則

首屏（above the fold）：名字來源（報紙）頭版，原指報紙摺疊以後仍能看見的頁面。Web中只網站加載後，用戶不用滾動屏幕所看到的全部信息。

---

1. 首屏最小化： 首屏HTML儘可能小，控制DOM節點數、請求數、外鏈數，可視區域儘快顯示。
2. 元素優化 優化落在首屏內的元素性能和結構，包括基礎頁、元素請求、圖片、JS、是否調用第三方內容、層次機構等。
3. 頁面靜態化 首屏頁包含了頁面基礎頁時間（第一次請求），以屏內的元素總的DNS解析時間，創建鏈接時間，SSL握手時間，發出請求時間，重定向時間，內容下載時間等。
4. 基礎頁優化 以靜態頁面的形式存放，用戶相關數據依賴Ajax，好比登陸信息。用戶默認顯示未登陸狀態，異步獲取到用戶數據後更新。
5. 首屏廣告優化 重點減小廣告JS的下載次數，減小狀態上報次數，避免iframe。同時處理腳本放在頁面底部，修改廣告的載入順序，避免影響頁面顯示。
6. 首屏按需加載 隱藏tab頁，用了異步加載的方式，只有當用戶正在要看這塊內容的時候纔去拉取。
7. 單獨合併素材 將代發佈的源文件進行壓縮合並，減小文件數量，受權請求最少原則。
8. 統計代碼優化 針對用戶行爲統計代碼如（CNZZ，百度統計等），進行去除冗餘，統一放到首屏後加載。