參考文檔
【阮一峯網絡日誌】網頁性能管理詳解
【淘寶團隊前端優化】無線性能優化：頁面可見時間與異步加載
移動H5前端性能優化指南
Chrome 渲染優化 - 層模型
前端性能總結
加載優化
加載過程是最爲耗時的過程，可能會佔到總耗時的80%時間，因此是優化的重點。
1. 減少HTTP請求（合併CSS、JavaScript；需要多個icon的使用精靈圖，避免請求文件過多）
2. 緩存（使用緩存可以減少向服務器的請求數，節省加載時間；）
3. 壓縮HTML、CSS、JavaScript
4. 無阻塞（寫在HTML頭部的JavaScript（無異步），和寫在HTML標籤中的Style會阻塞頁面的渲染，建議避免在HTML標籤中寫Style；建議JavaScript放在頁面尾）
5. 使用首屏加載//還不是很理解
6. 按需加載（PS：按需加載會導致大量重繪，影響渲染性能； LazyLoad；滾屏加載（比如手機端淘寶首頁）； 通過Media Query加載）
7. 預加載（大型重資源頁面（如遊戲）可使用增加Loading的方法； 可感知Loading(如進入空間遊戲的Loading)；不可感知的Loading（如提前加載下一頁））
8. 壓縮圖片（使用其它方式代替圖片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)；使用Srcset來按需顯示；選擇合適的圖片(1. webP優於JPG 2. PNG8優於GIF)；選擇合適的大小（1. 首次加載不大於1014KB 2. 不寬於640（基於手機屏幕一般寬度）；）
9. 減少Cookie
10. 避免重定向
11. 異步加載第三方資源
12. 【淘寶團隊前端優化】無線性能優化：頁面可見時間與異步加載
腳本執行優化
1.CSS寫在頭部，JavaScript寫在尾部或異步
2. 避免圖片和iFrame等的空Src
3. 儘量避免重設圖片大小(重設圖片大小是指在頁面、CSS、JavaScript等中多次重置圖片大小，多次重設圖片大小會引發圖片的多次重繪，影響性能)
4. 圖片儘量避免使用DataURL
CSS優化
1.儘量避免寫在HTML標籤中寫Style屬性，但是還是有些優先級原因可能會無法避免用style頂替！important值
2. 避免CSS表達式、移除空的CSS規則
3. 正確使用Display的屬性
Display屬性會影響頁面的渲染，因此請合理使用
a) display:inline後不應該再使用width、height、margin、padding以及float
b) display:inline-block後不應該再使用float
c) display:block後不應該再使用vertical-align
d) display:table-*後不應該再使用margin或者float
4. 不濫用Float（Float在渲染時計算量比較大，儘量減少使用）
5. 減少使用定位屬性（fixed/absolute）（static元素處於文檔流中，其渲染速度是最快的）
5. 不濫用Web字體
6. 不聲明過多的Font-size（過多會引發CSS樹的效率）
7. 值爲0時不需要任何單位
8. 標準化各種瀏覽器前綴（無前綴應放在最後； CSS動畫只用 （-webkit- 無前綴）兩種即可；其它前綴爲 -webkit- -moz- -ms- 無前綴 四種）使用編輯器的插件輔助即可
JavaScript執行優化
1.· 減少重繪和迴流
2. 避免不必要的Dom操作
3. 儘量改變Class而不是Style，使用classList代替className
4. 避免使用document.write
5. 減少drawImage
6. 緩存Dom選擇與計算
7. 緩存列表.length（每次.length都要計算，用一個變量保存這個值）
8. 儘量使用事件代理，避免批量綁定事件
9. 儘量使用ID選擇器
10. TOUCH事件優化（使用touchstart、touchend代替click，因快影響速度快。但應注意Touch響應過快，易引發誤操作）