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

前端效能優化清單：

前端優化項	優化內容	備註
首屏	首屏優化到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，百度統計等），進行去除冗餘，統一放到首屏後載入。