前端效能最佳化

從使用者訪問資源到資源完整的展現在使用者面前的過程中，透過技術手段和最佳化策略，縮短每個步驟的處理時間從而提升整個資源的訪問和呈現速度。網站的效能直接會影響到使用者的數量，所有前端效能最佳化很重要。

前端效能最佳化分為如下幾個方面：

一、程式碼部署：

1、程式碼的壓縮與合併
2、圖片、js、css等靜態資源使用和主站不同域名地址儲存，從而使得在傳輸資源時不會帶上不必要的cookie資訊。
3、使用內容分發網路 CDN
4、為檔案設定Last-Modified、Expires和Etag
5、使用GZIP壓縮傳送
6、權衡DNS查詢次數(使用不同域名會增加DNS查詢)
7、避免不必要的重定向(加"/")

二、編碼

html：
1、使用結構清晰，簡單，語義化標籤
2、避免空的src和href
3、不要在HTML中縮放圖片

css：
1、精簡css選擇器
2、把CSS放到頂部
3、避免@import方式引入樣式
4、css中使用base64圖片資料取代圖片檔案，減少請求數，線上轉base64網站：
5、使用css動畫來取代javascript動畫
6、使用字型圖示
7、使用css sprite(雪碧圖)
8、使用svg圖形
9、避免使用CSS表示式

10、避免使用css濾鏡

javascript：
1、減少引用庫的個數
2、使用requirejs或seajs非同步載入js
3、JS放到頁面底部引入
4、避免全域性查詢
5、使用原生方法
6、用switch語句代替複雜的if else語句
7、減少語句數，比如說多個變數宣告可以寫成一句
8、使用字面量表示式來初始化陣列或者物件
9、使用innerHTML取代複雜的元素注入
10、使用事件代理(事件委託)
11、避免多次訪問dom選擇集
12、高頻觸發事件設定使用函式節流
13、使用Web Storage快取資料